echarts实现渐变折线图并添加点击事件

 

 

 折线图点击事件代码：

 let myChart = this.$echarts.init(document.getElementById('trendBoxECharts'))

  myChart.getZr().on('click', params => {
          console.log(params)
          let pointInPixel = [params.offsetX, params.offsetY]
          if (myChart.containPixel('grid', pointInPixel)) {
            //点击第几个柱子
            let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
            // 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置
            // 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容
            // x轴数据的索引
            let xIndex = pointInGrid[0]
            console.log('当前点击的索引', xIndex)
          }
        })

 完整代码如下：