ECharts 的 axisPointer 可以出现在几个地方,以 x、y 轴图为例。
出现在 tooltip 下
tooltip.axisPointer.type 有几个值:
line:鼠标移上去,所在值出现一条指示线,默认针对 x 轴,即竖线。
shadow:鼠标移上去,所在值出现一条指示阴影(类似于一个小矩形),默认针对 x 轴。
cross:鼠标移上去,所在值出现纵横交叉的指示线。
none:鼠标移上去,无指示。
前面提到了,默认是 x 轴,其实也可以改变为 y 轴,如下:
tooltip.axisPointer.axis = 'y'
出现在 xAxis、yAxis 下
是一种细化设置,比如 tooltip.axisPointer.type 设置为 cross,表示鼠标移上去时,有十字相交线。
然后:
xAxis.axisPointer.lineStyle.color = "#f00";
yAxis.axisPointer.lineStyle.color = "#0f0";
此时会发现十字相交线的竖线是红色,横线是绿色。
这些样式都比较“听话”,唯独那个 type “不听话”,比如我们想在 x 轴上设置显示为 line、在 y 轴上设置显示为 shadow,现在看来,是做不到的。