echarts图表联动

插件版本

"vue": "^2.6.11",
"vue-echarts": "^5.0.0-beta.0",

vue组件

mounted() {
  this.initChart1()
  this.initChart2()

  // 调用图表联动初始化方法
  initChartLinkage.call(this)
},

beforeDestroy() {
  clearLinkEvent.call(this)
},

实现代码

// 初始化图表联动功能
export function initChartLinkage() {
  const self = this
  // 等待图表渲染完成
  this.$nextTick(() => {
    const chart1 = this.$refs.chart1 && this.$refs.chart1.chart
    const chart2 = this.$refs.chart2 && this.$refs.chart2.chart

    if (!chart1 || !chart2) return

    // 为chart1添加鼠标事件监听
    chart1.getZr().on('mousemove', function(event) {
      let myIdx = self.getDataIdx(chart1, event);
      let myText = self.xData[myIdx];
      let otherIdx = self.toggleXAxis(self.chart2Option, myText);
      chart2.dispatchAction({
        type: 'showTip',
        seriesIndex: self.seriesIdx.serIdx2,
        dataIndex: otherIdx
      })
    })
    chart2.getZr().on('mousemove', function(event) {
      let myIdx = self.getDataIdx(chart2, event);
      let myText = self.xData[myIdx]
      let otherIdx = self.toggleXAxis(self.chart1Option, myText);
      chart1.dispatchAction({
        type: 'showTip',
        seriesIndex: self.seriesIdx.serIdx1,
        dataIndex: otherIdx
      })
    })

    // 当鼠标离开图表时，隐藏两个图表的tooltip
    chart1.getZr().on('mouseout', () => {
      chart2.dispatchAction({ type: 'hideTip' })
    })
    chart2.getZr().on('mouseout', () => {
      chart1.dispatchAction({ type: 'hideTip' })
    })

    // 存储图表实例引用，以便在组件销毁时移除事件监听
    this.linkedCharts = [chart1.getZr(), chart2.getZr()]

    // 监听dataZoom联动
    function bindDataZoomSync(chartA, chartB) {
      chartA.on('datazoom', function(params) {
        // 防止事件循环触发
        if (this.isUpdating) return

        const dataZoom = params.batch ? params.batch[0] : params
        const start = dataZoom.start
        const end = dataZoom.end

        // 更新图表B
        chartB.setOption({
          dataZoom: [{
            start: start,
            end: end
          }]
        }, false, false) // 不触发事件

        // 标记图表B正在更新
        chartB.isUpdating = true
        setTimeout(() => {
          chartB.isUpdating = false
        }, 10)
      })

      // 双向绑定
      chartB.on('datazoom', function(params) {
        if (this.isUpdating) return
        const dataZoom = params.batch ? params.batch[0] : params
        const start = dataZoom.start
        const end = dataZoom.end

        chartA.setOption({
          dataZoom: [{
            start: start,
            end: end
          }]
        }, false, false)

        chartA.isUpdating = true
        setTimeout(() => {
          chartA.isUpdating = false
        }, 10)
      })
    }
    // 调用联动函数
    bindDataZoomSync(chart1, chart2)
  })
}

// 清理图表事件监听
export function clearLinkEvent() {
  if (this.linkedCharts && this.linkedCharts.length) {
    const [chart1, chart2] = this.linkedCharts

    if (chart1) {
      chart1.off('mouseover')
      chart1.off('mouseout')
    }

    if (chart2) {
      chart2.off('mouseover')
      chart2.off('mouseout')
    }

    this.linkedCharts = null
  }
}