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 } }