echarts 折线图多条折线 点击折线变粗

641 阅读1分钟

需求:折线图点击具体某条线线变宽,再次点击恢复,如果点击其他的线,上次点击的恢复

image.png

this.chart.getZr().on('click', (params) => {
          // 如果点击echart空白地方则topTarget为空
          if (params.topTarget) {
            var seriesIndex = params.target.seriesIndex
            // 得到点击的seriesIndex就可以写业务代码了
            var option = this.chart.getOption()
            // 如果当前点击和上一次点击的曲线不同,将上一次点击的变回之前的宽度
            if (this.clickSeriesIndex !== null && seriesIndex !== this.clickSeriesIndex) {
              option.series[this.clickSeriesIndex].lineStyle = {
                width: 2
              }
            }
            // 这里点击线会变粗,再点击恢复细线
            if (option.series[seriesIndex].lineStyle.width === 2) {
              option.series[seriesIndex].lineStyle = {
                width: 4
              }
              this.clickSeriesIndex = seriesIndex
            } else {
              option.series[seriesIndex].lineStyle = {
                width: 2
              }
              this.clickSeriesIndex = null
            }
            this.chart.setOption(option)
          }
        })

上面代码seriesIndex 获取有问题params.target.seriesIndex 只能获取到点击拐点对应的seriesIndex值 所以seriesIndex获取方式如下

this.chart.getZr().on('click', (params) => {
            let seriesIndex = 0
            if (params.target) { // 点击拐点
              seriesIndex = params.target.seriesIndex
            } else if (params.topTarget && params.topTarget.parent && params.topTarget.parent.parent) { // 点击线
              seriesIndex = params.topTarget.parent.parent.__ecComponentInfo.index
            } else {
              return
            }
            // 得到点击的seriesIndex就可以写业务代码了
            var option = this.chart.getOption()
            // 如果当前点击和上一次点击的曲线不同,将上一次点击的变回之前的宽度
            if (this.clickSeriesIndex !== null && seriesIndex !== this.clickSeriesIndex) {
              option.series[this.clickSeriesIndex].lineStyle = {
                width: 2
              }
            }
            // 这里点击线会变粗,再点击恢复细线
            if (option.series[seriesIndex].lineStyle.width === 2) {
              option.series[seriesIndex].lineStyle = {
                width: 4
              }
              this.clickSeriesIndex = seriesIndex
            } else {
              option.series[seriesIndex].lineStyle = {
                width: 2
              }
              this.clickSeriesIndex = null
            }
            this.chart.setOption(option)
          })