Echarts 实现两个图表联动

init(obj, pageSource) {
  var that = this
  console.log(obj, pageSource)
  this.chart = this.$echarts.init(document.getElementById(this.id))
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        animation: false
      },
      backgroundColor: "#5B596080",
      borderWidth: "0",
      textStyle: {
        color: "white" //设置文字颜色
      },
      formatter: function (params) {
        // console.log(params)
        let scatterList = [],
          lineList = [],
          allList = []
        params.forEach((item) => {
          if (item.seriesType == "line") {
            lineList.push(item)
          }
          if (item.seriesType == "scatter") {
            scatterList.push(item)
          }
        })
        if (
          scatterList.length > 0 &&
          (scatterList[0].data[2] > 0 ||
            scatterList[1].data[2] > 0 ||
            scatterList[2].data[2] > 0)
        ) {
          lineList = lineList.concat([
            { seriesType: "interval", name: "事件" }
          ])
        }
        allList = lineList.concat(scatterList)
        var result = ""
        result +=
          params[0].name +
          "<br/>" +
          '<div style="height:30px;line-height:30px;font-size:12px;font-weight:300">' +
          "数据" +
          "</div>"
        allList.forEach((item) => {
          if (item.seriesType == "line") {
            result +=
              '<div style="width:257px;display:flex;justify-content: space-between;padding-right:50px;font-size:12px;font-weight:300">' +
              "<span>" +
              item.marker +
              item.seriesName +
              "</span>" +
              '<p style="display:inline-block;text-align:right;">' +
              (item.value > 10000
                ? (item.value - (item.value % 1000)) / 10000 + "w"
                : item.value) +
              "</p></div>"
          }
          if (item.seriesType == "interval") {
            result +=
              '<div style="height:30px;line-height:30px;font-size:12px;font-weight:300">' +
              item.name +
              "</div>"
          }
          if (item.seriesType == "scatter" && item.data[3]) {
            result +=
              '<div style="width:257px;display:flex;align-item:center;font-size:12px;font-weight:300">' +
              '<span style="display:inline-block;">' +
              item.marker +
              item.seriesName +
              " ： </span>" +
              '<span style="display:inline-block;width:180px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;line-height:20px">' +
              item.data[3] +
              "</span></div>"
          }
          if (pageSource == "realTimeScreen") {
            if (item.seriesName == "讲解" && item.data[4]) {
              that.$emit("emitChanges", 0)
            } else if (item.seriesName == "福袋" && item.data[4]) {
              that.$emit("emitChanges", 1)
            }
          }
        })
        return result
      }
    },
    legend: {
      data: obj.legend,
      top: 20,
      left: 20,
      itemGap: 5,
      itemWidth: 5,
      itemGap: 20,
      textStyle: {
        color: "#E0E0E0",
        fontSize: "13"
      }
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: "all"
        }
      ]
    },
    grid: [
      {
        left: 60,
        right: 20,
        height: "60%",
        top: "15%"
      },
      {
        left: 60,
        right: 20,
        top: "80%",
        height: "20%"
      }
    ],
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: { onZero: true },
        data: obj.timeData,
        axisLabel: {
          textStyle: {
            color: "#ffffff"
          }
        }
      },
      {
        show: false,
        gridIndex: 1,
        type: "category",
        boundaryGap: false,
        axisLine: { onZero: true },
        data: obj.timeData,
        position: "top"
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "数量",
        nameTextStyle: {
          //y轴上方单位的颜色
          color: "#fff",
          padding: [0, 0, 5, -46]
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#3c3a44"
          }
        },
        axisLabel: {
          textStyle: {
            color: "#ffffff"
          }
        }
      },
      {
        gridIndex: 1,
        // name: 'Rainfall(mm)',
        // type: 'value',
        offset: 5,
        inverse: true,
        data: ["讲解", "福袋", "预警"],
        axisLine: {
          show: false //不显示坐标轴线
        },
        axisTick: {
          show: false //不显示坐标轴刻度线
        },
        splitLine: {
          lineStyle: {
            shadowBlur: 0,
            shadowOffsetX: 0,
            shadowOffsetY: 20,
            shadowColor: "#ffffff32", //默认透明
            color: "#2F2D36",
            type: "dashed" //虚线
          },
          show: true //隐藏
        },
        axisLabel: {
          textStyle: {
            color: "#ffffff"
          }
        }
      }
    ],
    series: [
      {
        name: "成交金额",
        type: "line",
        symbolSize: 3, //标记的大小
        symbol: "circle",
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(134, 83, 213,1)"
                },
                {
                  offset: 0.6,
                  color: "rgba(152, 122, 243,0.1)"
                }
              ],
              false
            )
          }
        },
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgb(134, 83, 213)",
            areaStyle: { type: "default" }
          }
        },
        data: obj.payAmtData
      },
      {
        name: "在线人数",
        type: "line",
        symbolSize: 3, //标记的大小
        symbol: "circle",
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(41, 161, 255,1)"
                },
                {
                  offset: 0.6,
                  color: "rgba(25, 104, 255,0.1)"
                }
              ],
              false
            )
          }
        },
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgb(41, 161, 255)",
            areaStyle: { type: "default" }
          }
        },
        data: obj.onlineUserCntData
      },
      {
        name: "进入人数",
        type: "line",
        symbolSize: 3, //标记的大小
        symbol: "circle",
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(134, 82, 213,1)"
                },
                {
                  offset: 0.6,
                  color: "rgba(152, 122, 243,0.1)"
                }
              ],
              false
            )
          }
        },
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgb(134, 82, 213)",
            areaStyle: { type: "default" }
          }
        },
        data: obj.watchUcntData
      },
      {
        name: "离开人数",
        type: "line",
        symbolSize: 3, //标记的大小
        symbol: "circle",
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(141, 141, 187,1)"
                },
                {
                  offset: 0.6,
                  color: "rgba(176, 176, 235,0.1)"
                }
              ],
              false
            )
          }
        },
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgb(141, 141, 187)",
            areaStyle: { type: "default" }
          }
        },
        data: obj.leaveUcntData
      },
      {
        name: "新增粉丝数",
        type: "line",
        symbolSize: 3, //标记的大小
        symbol: "circle",
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(203, 78, 105, 1)"
                },
                {
                  offset: 0.6,
                  color: "rgba(223, 112, 116, 0.1)"
                }
              ],
              false
            )
          }
        },
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgb(203, 78, 105)",
            areaStyle: { type: "default" }
          }
        },
        data: obj.incrFansCntData
      },
      {
        name: "讲解",
        type: "scatter",
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize: function (data) {
          return Math.sqrt(data[2]) * 1
        },
        itemStyle: {
          normal: {
            color: "#8A5BDA"
          }
        },
        data: obj.productData
      },
      {
        name: "福袋",
        type: "scatter",
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize: function (data) {
          return Math.sqrt(data[2]) * 1
        },
        itemStyle: {
          normal: {
            color: "#EA5766"
          }
        },
        data: obj.blessData
      },
      {
        name: "预警",
        type: "scatter",
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        symbolSize: function (data) {
          return Math.sqrt(data[2]) * 1
        },
        itemStyle: {
          normal: {
            color: "#458FB7"
          }
        },
        data: obj.warnData
      }
    ]
  }
  this.chart.setOption(option)
}

数据格式：