【随记】-【Echarts】 - 给需要的地方添加点击事件

397 阅读1分钟

首先官方文档的事件触发格式为:

echartsInstance. on( eventName: string, query: string|Object, handler: Function, context?: Object )

参数说明:

  1. eventName

事件名称,全小写,例如'click','mousemove', 'legendselected'

注: ECharts 2.x 中会使用 config 对象中的 CLICK 等属性作为事件名称。在 ECharts 3 中统一使用跟 dom 事件一样的全小写字符串作为事件名。

  1. query

可选的过滤条件,能够只在指定的组件或者元素上进行响应。可为 string 或者 Object。 chart.on('click', 'series', function () {...}); 如果为 string 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。

  1. handler

事件处理函数

  1. context

可选。回调函数内部的context,即this的指向

第一先确定有没有默认事件

以title为例 因为title 默认没有事件,所以需要设置title的triggerEvent为true 这是你会发现,鼠标移到title上会变成小手指,相当于设置了cursor:pointer 淦,不能截图,反正鼠标放上去样式就变了 triggerEvent: true,

第二在echarts 初始化的时候 添加事件

myChart.on("click",'title', (params) => { console.log(params) }

最后点击title 就触发了

1.png