Echarts折线图点击某一区域后点高亮（多条折线）

Echarts折线图点击某一区域后点高亮（多条折线）

需求分析

产品想要在折线图上点击某个折线，或者是点击某一区域触发事件，然后点击的地方或者区域对应的一个或者多个数据点就要变高亮，不止是在折线图的拐点，那处理方法我想了两种，如下

1. 用echarts原生的点击事件来触发实现
也就是 myChart.on(‘click’, function(){})方法，但是后来一想这个方法只能点击到点上面才可以拿到那个点的数据信息，所以单纯靠这个方法是不行的。

2. 获取点击位置，返回这个点也就是这条数据的下标，然后通过下标去找点击的哪一个点被点击了，或者哪一个点所在的区域被点击了。

而且我们要的高亮不仅仅是折线图上边某一个点变大，而是颜色与其他点不同，且那一点变大，如下图：

用官方的放大实现高亮好像不能自定义颜色及高亮的点个数，后来我就自己想了这样一种实现方式，
因为我们的数据量可能也不是很大，所以我每次点击拿到那一个数据点的下标之后会把对应的数据点配置改成高亮，然后重新setOption，就实现了高亮，这样可以实现多个点的高亮，且业务需求。
折线图的配置项就不一 一列举了，直接写功能代码：

注意：
这里要注意的是，除了点击某一区域更新数据变高亮外，如果重新查询别的时间范围内的数据去更新图谱的话，要把series和你存放的下标数组给置空，不然会有Bug出现哦

// this.chart 折线图实例
// this.series 折线图series数据
// this.selectIndex 存放高亮数据下标数组
this.chart.getZr().on('click', (e) => {
    
    
    let pointInPixel = [e.offsetX, e.offsetY];
    let pointInGrid = this.chart.convertFromPixel({
    
    
        seriesIndex: 0
    }, pointInPixel);
    let xIndex = pointInGrid[0]; 
    let handleIndex = Number(xIndex); //索引下标
    // 如果没有数据得话下边逻辑可以不用走了
    if (this.series.length == 0) return
    // 这里是判断是否点击的是同一个点，如果当前点击的点已经高亮则不需要再进来
    if (this.selectIndex.indexOf(handleIndex) == -1) {
    
    
        this.selectIndex.push(handleIndex);
        this.series.forEach(item => {
    
    
            let obj = item;
            var arr = [];
            obj.data.map((val, ind) => {
    
    
            	// 这里自己选择，我的需求是实现高亮2个点，如果大于两个则取消第一个
                if (this.selectIndex.length == 3) {
    
    
                    if (ind == this.selectIndex[0]) {
    
    
                        val = val.value;
                    }
                }
                // 高亮当前点击的数据点
                if (ind == handleIndex) {
    
    
                    val = {
    
    
                        value: val,
                        itemStyle: {
    
    
                            normal: {
    
    
                                color: "#ff1493",
                            },
                        },
                    }
                }
                arr.push(val)
            })
            obj.data = arr;
        })
        // 更新数据
        this.chart.setOption({
    
    
            series: this.series
        })
        // 同上 这里自己选择，如果下标数组为3则删除第一个点
        if (this.selectIndex.length == 3) {
    
    
            this.selectIndex.shift();
        }
    }
});

这个点击事件应该是万能的，柱状图及其他类型图谱都可以复用，稍加改造就可以实现。