echart不同div中的双表联动

先上效果图：

如图，通过点击右侧div中的柱体，修改左侧多组折线图中的第一条数据。柱体和多组折线图表都是echart官网标准图例未做修改，各位可以根据自己的需求去做样式这里就不多说了，下面我们说正题。
要实现不同div中的echart图表联动，可以使用echarts提供的setOption方法，通过在某个图表上选中某个数据项时，更新另一个图表的数据。
具体代码如下：

html部分：
这部分主要是用来展示图表，可以随便改。

  <div style="display: flex">
    <div id="lineChart" style="height: 500px;width: 1000px"></div>
    <div id="barChart" style="height: 500px;width: 1000px;"></div>
  </div>

js部分：

      // 初始化柱图
      const barChart = echarts.init(document.getElementById('barChart'));
      // 配置柱图的option
      let barOption = {
   
   
        xAxis: {
   
   
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
   
   
          type: 'value'
        },
        series: [
          {
   
   
            data: [1120, 2100, 300, 1180, 710, 600, 1130],
            type: 'bar'
          }
        ]
      };
      //设置echart实例的配置项
      barChart.setOption(barOption);
      //自适应
      window.addEventListener("resize", function () {
   
   
        barChart.resize();
      });

      // 初始化折线图
      const lineChart = echarts.init(document.getElementById('lineChart'));
      // 配置折线图的option
      //这部分配置看不清的可以翻翻我之前的echart配置博客
      const lineOption = {
   
   
        title: {
   
   
          text: 'Stacked Line'
        },
        tooltip: {
   
   
          trigger: 'axis'
        },
        legend: {
   
   
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
   
   
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
   
   
          feature: {
   
   
            saveAsImage: {
   
   }
          }
        },
        xAxis: {
   
   
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
   
   
          type: 'value'
        },
        series: [
          {
   
   
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
   
   
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
   
   
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
   
   
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
   
   
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 290, 130, 120]
          }
        ]
      };
      lineChart.setOption(lineOption);
      window.addEventListener("resize", function () {
   
   
        lineChart.resize();
      });

      // 监听柱图的点击事件，更新折线图的数据
      barChart.on('click', function(params) {
   
   
        // 根据点击的柱子的数据项，计算出对应的新数据
        lineOption.series[0].data[0] = params.data;
        //给折线图设置新的option设置
        lineChart.setOption(lineOption);
      });

数据随便写的，可以根据业务做接口获取或修改。注意要引入echarts依赖！