echarts——折线图点击线触发事件的记录

Echarts关于折线的Click事件,根据官网案例只能通过拐点的Symbol触发。对于中间连接线的点击无法触发点击事件。

image-20240130114715211

目前想要通过点击线同样触发点击事件。

根据官网的文档，发现Echarts 提供了 getZr API,用于获取 ZRender 实例;

通过对ZRender实例的点击事件监听,获取当前点击位置。

image-20240130115527749

监听ZRender点击事件会返回当前点击target。

当点击折线标记时候，会返回当前type为Line，点击折线线段时候会返回type为ec-polyline。

image-20240130115733065

这里当Type为ec-polyline时，__ec_inner_1字段中会带有当前series的下标

image-20240130115851034

image-20240130120015129

根据下标定位到数据位置

同理对于区域填充，也可以使用相同的方法监听。

image-20240130120201834

备注:

在主题切换，在切换width到某一值时候点击事件会消失，但是更换个值就会恢复。未知晓原因。