image.png

  1. initChart1() {
  2. this.optionChart.series = this.line1Data.series;
  3. this.optionChart.xAxis.data = this.line1Data.xAxisData;
  4. this.optionChart.color = this.dataSource1.color;
  6. this.tableDataFormat1 = this.line1Data.tableData;
  7. var chartDom = document.getElementById(this.dataSource1.id);
  8. chartDom.style.height = 334 + 'px'
  9. chartDom.style.width = '100%'
  10. this.myChart1 = echarts.init(chartDom);
  11. this.myChart1.resize()
  12. this.myChart1.clear()
  13. this.myChart1.setOption(this.optionChart);
  14. },
  16. initChart2() {
  17. this.optionChart.series = this.line2Data.series;
  18. this.optionChart.xAxis.data = this.line2Data.xAxisData;
  19. this.optionChart.color = this.dataSource2.color;
  21. this.tableDataFormat2 = this.line2Data.tableData;
  22. var chartDom = document.getElementById(this.dataSource2.id);
  23. chartDom.style.height = 334 + 'px'
  24. chartDom.style.width = '100%'
  25. this.myChart2 = echarts.init(chartDom);
  26. this.myChart2.resize()
  27. this.myChart2.clear()
  28. this.myChart2.setOption(this.optionChart);
  29.       },
  31. // 关键代码
  32. setTimeout(() => {
  33.   echarts.connect([this.myChart1, this.myChart2])
  34. }, 500);

参考

  1. vue 使用echarts的图表进行联动 echarts.connect()方法无效，
  2. Echarts实现图表联动（多图联动、图表间联动）