通常对echats做点击事件的时候
myChart.on("click", params=>{})
问题:
折线图的情况
只有用户点击到点(对就是那个小小折线节点)的时候才能拿到返回数据或者进行下一步操作!
我们期望在鼠标随便点击的情况下,可以自动找到最近节点的数据,做一些事情,而不是去费力费眼的去找那个小小的折线节点点击
1、获取到当前节点的一些数据
tooltip: {
trigger: 'axis',
...
formatter: (params) => {
//tooltip的一系列操作
...
// 保留数据
this.chartsCurrentData = params[0]
}
},
2、在点击事件中获取索引去做一些事情
// 鼠标滑过时变成小手
this.echarts.getZr().on('mousemove', param => {
var pointInPixel= [param.offsetX, param.offsetY];
if (this.echarts.containPixel('grid',pointInPixel)) {//若鼠标滑过区域位置在当前图表范围内 鼠标设置为小手
this.echarts.getZr().setCursorStyle('pointer')
}else{
this.echarts.getZr().setCursorStyle('default')
}
})
// 点击区域增大
this.echarts.getZr().on('click',params=>{
const pointInPixel= [params.offsetX, params.offsetY];
if (this.echarts.containPixel('grid',pointInPixel)) {
const { dataIndex} = this.chartsCurrentData;
// 点击的逻辑
}
})