前端 - Echarts 中怎样点击曲线图，面的区域，获取数据？

Question

tooltip.trigger 我设置的是 axis, 所以只能通过坐标轴，点击节点，Chart.on('click', function(params){...}), 才能获取回调函数，能不能点击色块区域，获取回调函数，坐标点太小操作不友好

Answer 1

Echarts 中，如果你想通过点击色块区域获取数据，你可以使用 chart.on('click', function(params){...}) 这个事件。

你需要知道的是，Echarts 提供了一个 params 对象给回调函数，这个对象包含了关于点击事件的各种信息，包括被点击的数据系列 seriesIndex，数据项 dataIndex，数据值 value，坐标 xAxisValue 和 yAxisValue 等。

假设你有一个如下的折线图：

option = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {        type: 'value'    },    series: [{        data: [820, 932, 901, 934, 1290, 1330, 1320],        type: 'line',        areaStyle: {} // 开启面积图    }]};

你可以添加一个点击事件：

myChart.on('click', function (params) {    console.log(params.seriesIndex); // 点击的系列索引    console.log(params.dataIndex); // 点击的数据项索引    console.log(params.value); // 点击的数据值    console.log(params.xAxisValue); // 点击的 x 坐标    console.log(params.yAxisValue); // 点击的 y 坐标});

你只需要将这些信息用于你的业务逻辑，就可以实现你的需求了。比如你可以在点击事件发生时，将点击的数据值保存到本地，或者在控制台打印出来。