echarts官方中,只能在折线的拐点获取数据,如果想查询这一条折线对应的所有相关数据就拿不到条件。采用了以下方法解决这个问题:
this.myChart.getZr().on('click', (params) => {
const {target} = params;
// 判断点击的点在 点击在折线的拐点 || 折线上
if (target && target.z === 3) {
const parent = params.target.parent.parent;
let seriesIndex = parent.__ecComponentInfo ? parent.__ecComponentInfo.index : parent.parent.__ecComponentInfo.index
console.log(seriesIndex);
// 获取数据,进行操作
}
})
通过getZr()方法获取到点击时的数据,然后通过判断找到点击的线的索引。
!!!重点:
清除绑定事件要这样写,否则每一次图表重新渲染,点击事件就会多重复发起一次。
clearChart() {
this.myChart && this.myChart.getZr().off("click") && this.myChart.clear();
window.removeEventListener('resize', this.resizeChart)
},