Vue中echarts联动效果处理

添加echarts点击事件

监听绑定的联动数据变化，有绑定为true，没有绑定为false；如果取消绑定，需要做点击事件解绑操作

    linkage: function(newValue, oldValue) {
      if (newValue === true) {
        this.seriesClick()
      }
      if (newValue === false && oldValue === true) {
        this.selectList = {}
        this.chart.off('click') // 取消点击事件
      }
    }

在方法中添加如下操作，一种是普通的点击操作，一种是根据xy轴位置计算出选中的x轴值。

    norClick() {
      this.chart.on('click', (params) => {
        params.t_id = this.id // 图表id赋值
        if (this.selectList.dataIndex === params.dataIndex) {
          params.name = ''
          this.selectList = {}
        } else {
          this.selectList = params
        }
        this.$emit('onclick', params) // 将点击的值传回原页面
      })
    },
    getZrClick() {
      this.chart.getZr().on('click', (params) => {
        const pointInPixel = [params.offsetX, params.offsetY] // x轴和y轴位置
        const temp = {}
        if (this.chart.containPixel('grid', pointInPixel)) {
          const pointInGrid = this.chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
          const xIndex = pointInGrid[[0]] // 根据xy轴位置找到x轴对应的index数
          temp.dataIndex = xIndex
          const optionList = this.chart.getOption()
          temp.name = optionList.xAxis[0].data[temp.dataIndex]
        }
        temp.t_id = this.id
        if (this.selectList.dataIndex === temp.dataIndex) {
          temp.name = ''
          this.selectList = {}
        } else {
          this.selectList = temp
        }
        this.$emit('set', temp)
      })
    },
    seriesClick() {
      if (widgetType === '饼图等') {
        this.norClick() // 正常的点击事件
      } else {
        this.getZrClick()
      }
    }

图表数据变化处理

在监听事件中添加如下代码

    optionList: {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        if (oldValue) {
          this.$nextTick(function() {
            this.referesh()
          })
        }
      }
    }

在referesh方法中写入echarts联动效果处理，可优化

referesh() {
      const optionList = JSON.parse(JSON.stringify(this.optionList))
      if (this.selectList.dataIndex >= 0) {
        this.difLinkage(optionList) // 如果联动有选中数据，需要对其进行分类判断，取消联动和联动效果区别
        console.log(this.optionList)
      }
      this.chart.setOption(optionList, true)
    },
    difLinkage(difList) {
      // 图表联动样式的区别修改，如果联动有选中数据，需要对其进行分类判断，取消联动和联动效果区别
      if (widgetType === '饼图等') {
        difList.series.forEach(arr => {
          arr.selectedOffset = 10
          const tempList = []
          arr.data.forEach((item, index) => {
            const temp = item
            if (index === this.selectList.dataIndex) {
              temp.tooltip = {}
              temp.tooltip.triggerOn = 'item'
              temp.tooltip.formatter = '点击取消选中'
            } else {
              temp.itemStyle = {}
              temp.itemStyle.opacity = 0.1
            }
            console.log(temp)
            tempList.push(temp)
          })
          arr.data = tempList
          arr.datas = JSON.stringify(tempList)
        })
        console.log(difList)
      } else {
        // 折线图\折线柱状图\组合图
        if (!difList.tooltip) {
          difList.tooltip = {}
        }
        difList.tooltip.show = true
        difList.tooltip.trigger = 'axis'
        // difList.tooltip.trigger = 'item'
        difList.tooltip.triggerOn = 'click'
        difList.tooltip.showContent = true
        difList.tooltip.alwaysShowContent = true
        difList.tooltip.formatter = '点击取消联动'
        if (!difList.xAxis.axisPointer) {
          difList.xAxis.axisPointer = {}
        }
        // difList.xAxis.type = 'item'
        // difList.xAxis.show = difList.xAxis.show || true
        difList.xAxis.axisPointer.show = true
        difList.xAxis.axisPointer.type = 'line'
        difList.xAxis.axisPointer.value = this.selectList.dataIndex
        difList.xAxis.axisPointer.snap = true
        difList.xAxis.axisPointer.triggerTooltip = true
        difList.xAxis.axisPointer.handle = {
          show: true,
          size: [0, 0]
        }
        difList.series.forEach(arr => {
          const tempList = []
          if (!arr.lineStyle) {
            arr.lineStyle = {}
          }
          arr.lineStyle.opacity = 0.3
          arr.data.forEach((item, index) => {
            const temp = {
              name: difList.xAxis.data[index],
              value: item
            }
            if (index === this.selectList.dataIndex) {
              temp.symbolSize = 5
              temp.tooltip = {}
              temp.tooltip.triggerOn = 'item'
              temp.tooltip.formatter = '点击取消联动'
            } else {
              temp.symbolSize = 2 // 折线上点的大小
              temp.itemStyle = {}
              temp.itemStyle.opacity = 0.15
            }
            console.log(temp)
            tempList.push(temp)
          })
          arr.data = tempList
          arr.datas = JSON.stringify(tempList)
        })
      }
    }