echarts,点击事件
问题:
折线图的情况
只有点击到折线节点
的时候才能拿到返回数据或者进行下一步操作!
期望在鼠标随便点击的情况下,可以自动找到最近节点的数据,做一些事情,而不是去费力费眼的去找那个小小的折线节点点击
重要
要使用节流
import _ from 'lodash';
_.debounce()
清除点击
事件(重要)
myChart.off('click');myChart.getZr().off('click');
点击图表柱子或折线点
myChart.off('click');myChart.on('click',_.debounce(function (params) {console.log('事件echartData', params, params.data);}, 300));
点击空白处
getOption
myChart.getZr().off('click');myChart.getZr().on('click',_.debounce(function (params) {let pointInPixel = [params.offsetX, params.offsetY];if (myChart.containPixel('grid', pointInPixel)) {let pointInGrid = myChart.convertFromPixel({seriesIndex: 0,},pointInPixel);let xIndex = pointInGrid[0]; //点击的索引var option = myChart.getOption();let seriesName = option.series[xIndex].name;console.log('事件echartDatagetZr', params, xIndex,seriesName, pointInGrid);}}, 1000));