一开始设置Echarts的指示器axisPointer,
焦点是跟着鼠标点击的位置,但是期望的焦点是在红色折线上,如下图所示
axisPointer设置的关键代码:
tooltip: {
trigger: "axis",
triggerOn: "mousemove",
position: [-5, 0],
axisPointer: {
type: "cross",
snap: true,
label: {
show: false,
},
},
transitionDuration: 0,
backgroundColor: "#FFFFFF",
textStyle: {
color: "#3C3C3C", // 设置文字颜色
fontSize: 12,
lineHeight: 20,
},
}
查了下官方文档,没有看到可以设置axisPointer位置的属性,最后决定使用markLine来绘制axisPointer中横线
大概思路是先修改axisPointer的tpye为"line"(即只展示竖线),然后监听Echarts的mousemove、mousedown事件,根据鼠标位置获取坐标轴中对应的数据,改变markLine的位置,重新setOption(绘制横