ECharts为折线图添加点击事件

ECharts里，如果图表中系列太多，想突出显示其中一个，可以点击它并调用触发高亮事件。自带的点击事件是

chart.on('click', function (params) {})

在ECharts的文档里，提供的高亮事件是

chart.dispatchAction({
    type: 'highlight',
    // 用 index 或 id 或 name 来指定系列。
    // 可以使用数组指定多个系列。
    seriesIndex?: number | number[],
    seriesId?: string | string[],
    seriesName?: string | string[],
    // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
    dataIndex?: number | number[],
    // 可选，数据项名称，在有 dataIndex 的时候忽略
    name?: string | string[],
});

实际在折线图上应用时，还需要解决3个问题：

1. 点击事件只对数据节点有效，点击线条并不触发
2. 如何获取目标线条的index
3. 由于线条较细且颜色变化不够大，高亮后的线条并不明显

对于第一点，解决方法是调用getZr()。

对于第二点，不知为何，在网上搜索到的方案里用的是点击线条时触发

params?.target?.seriesIndex

点击数据节点时触发

params?.topTarget?.parent?.parent?.__ecComponentInfo?.index

但可能是版本不同的原因，我测试时它们并不起作用，在一堆属性里翻了好久才找到实际有效的

params.target.parent.parent.__ecComponentInfo.index

和

params.target.parent.parent.parent.__ecComponentInfo.index

对于第三点，则只能放弃官方提供的高亮事件，通过加粗线条和放大数据节点的方式实现突出显示，即改变option后再调用一次setOption()。

最终可用的示例如下：

let chart = echarts.init(document.getElementById(id));
chart.setOption(option);
chart.getZr().on('click', function(params) {
    let index_series_clicked = params?.target?.parent?.parent?.__ecComponentInfo?.index || params?.target?.parent?.parent?.parent?.__ecComponentInfo?.index;
    if (index_series_clicked > -1) {
        option.series[index_series_clicked].symbolSize = 10;
        option.series[index_series_clicked].lineStyle.width = 5;
        chart.setOption(option);
    }
});