ECharts 的 axisPointer

作者:vkvi 来源:ITPOW(原创) 日期:2021-9-6

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,现在看来,是做不到的。

相关文章