Echarts实现柱状图和折线图等多种图形联动

需求需要实现鼠标移入柱状图，显示实折线图相关数据
话不多说，直接看效果图吧

先实现折线图相关代码

option = {
  backgroundColor: '#1C162E', //背景颜色
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#FFFFFF',
    borderWidth: '1',
    borderColor: '#E5E5E5',
    padding: 10,
    extraCssText: 'box-shadow: 0 0 7px 0 rgba(0,0,0,0.10);',
    textStyle: {
      color: '#333333',
      fontSize: '12px'
    },
      formatter: function(params) {
      //这里是实现联动的关键地方，返回一个div，同时对这个div绘制相应的图形
                setTimeout(() => {
                        that.drawEchart1("zxt");
                 }, 0);
                return '<div style="width: 200px;height: 200px" id="zxt" ></div>';
       }
  },
  legend: {
    show: false
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      triggerEvent: true,
      boundaryGap: true,
      data: ['昨日', '本月', '本年', '累计'],
      axisLabel: {
        interval: 0,
        rotate: -0,
        clickable: true,
        textStyle: {
          color: '#999999'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#D0D0D0'
        }
      }
    }
  ],
  yAxis: [
    {
      interval: 100 / 2,
      type: 'value',
      boundaryGap: false,
      axisLabel: {
        textStyle: {
          color: '#999999'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#D0D0D0'
        }
      },
      splitLine: {
        //网格线的格式
        // show:false//去掉y轴上的网格线——
        lineStyle: {
          color: 'rgba(208,208,208,0.67)', //网格线颜色
          width: 1, //网格线宽度
          type: 'dashed' //网格线样式
        }
      }
    }
  ],
  grid: {
    top: 50,
    bottom: 50,
    containLabel: true
  },
  series: [
    {
      name: '降雨量统计',
      type: 'bar',
      stack: '总量',
      barWidth: 40,
      label: {
        normal: {
          show: true,
          position: 'top',
          color: '#666666',
          fontSize: 12
        }
      },
      data: [100, 200, 300, 400],
      itemStyle: {
        normal: {
          color: '#FF8731'
        }
      }
    }
  ]
};

函数 drawEchart1 中实现联动的图形就行，这里写出简单的代码

option = {
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: 30,
    right: 10,
    top: 50,
    bottom: 40
  },
  xAxis: {
    axisLabel: {
      rotate: 45
    },
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: [
    {
      name: '降雨量/日',
      type: 'value'
    }
  ],
  series: [
    {
      name: '线条一',
      type: 'line',
      data: [10, 23, 58, 20, 30, 40]
    }
  ]
};