echarts折线图与散点图（共用legend，tootip不影响）

折磨了几个小时，人都麻了

需求是这样：tootip散点图显示一个点

 折线图全部展示一条线上的

思路： 通过设置tootip设置item，画两条x轴，其中一条设置触发方式type: 'line'（类似为axis）

<template>
  <div class="erter">
    <div class="etet" ref="myecharts"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myecharts: null,
      newOption: [],
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.myecharts);
    this.drawing();
  },
  methods: {
    drawing() {
      const option = {
        legend: {
          show: true,
          data: ["111", "222"],
        },
        xAxis: [
          {
            data: ["1", "2", "3", "4", "5", "6", "7"],
            axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false,
            },
          },

          },
          {
            data: ["1", "2", "3", "4", "5", "6", "7"],
          },
        ],
        tooltip: {
          show: true,
          trigger: "item",
        },
        yAxis: [
          {},
          {
          },
        ],
        grid: [
          {
            bottom: "60%",
          },
        ],
        series: [
          {
            type: "line",
            name: "111",
            data: [1220, 1832, 1491, 2354, 2960, 3730, 8310],
          },
          {
            type: "line",
            name: "222",
            data: [2220, 1832, 1941, 2534, 2960, 3370, 3110],
          },
          {
            type: "line",
            name: "111",
            symbol: 'circle',
            symbolSize: '7',
            data: [[3, 2960]],
            xAxisIndex: 1,
            yAxisIndex: 1,
          },
          {
            type: "line",
            name: "222",
            symbol: 'circle',
            symbolSize: '7',
            data: [[4, 2960]],
            xAxisIndex: 1,
            yAxisIndex: 1,
          },
        ],
      };

      this.myChart.setOption(option, false);
    },
  },
};
</script>

<style scoped>
.box1 {
  font-size: 12px;
}
.etet {
  height: 500px;
  width: 1200px;
}
.erter {
  height: 100%;
  width: 100%;
  background-color: antiquewhite;
}
</style>