vue-echarts-dataZoom(联动)

<template>
  <el-row>
    <el-col :span="8">
      图一
      <div id="myChartOne" style="width: 550px; height: 550px"></div>
    </el-col>
    <el-col :span="8">
      图二
      <div id="myChartTwo" style="width: 550px; height: 550px"></div>
    </el-col>
    <el-col :span="8">
      图三
      <div id="myChartThree" style="width: 550px; height: 550px"></div>
    </el-col>
  </el-row>
</template>



<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      var echarts = require("echarts");
      var lineOne = echarts.init(document.getElementById("myChartOne"));
      var lineTwo = echarts.init(document.getElementById("myChartTwo"));
      var lineThree = echarts.init(document.getElementById("myChartThree"));

      var optionOne = {
        dataZoom: [
          {
            type: "slider",
          }
        ],
        xAxis: {
          scale: true,
          data: [22, 24, 26, 28, 22, 32, 34, 46, 48, 50],
        },
        yAxis: {
          scale: true,
        },
        series: [
          { type: "scatter", data: [22, 22, 26, 28, 30, 22, 34, 36, 38, 40] },
        ],
      };


      var optionTwo = {
        dataZoom: [
          {
            type: "slider",
          },
        ],
        xAxis: {
          scale: true,
          data: [22, 24, 26, 28, 22, 32, 34, 46, 48, 50],
        },
        yAxis: {
          scale: true,
        },
        series: [
          { type: "scatter", data: [22, 22, 26, 28, 30, 22, 34, 36, 38, 40] },
        ],
      };


      var optionThree = {
        dataZoom: [
          {
            type: "slider",
          }
        ],
        xAxis: {
          scale: true,
          data: [22, 24, 26, 28, 22, 32, 34, 46, 48, 50],
        },
        yAxis: {
          scale: true,
        },
        series: [
          { type: "scatter", data: [22, 22, 26, 28, 30, 22, 34, 36, 38, 40] },
        ],
      };


      lineOne.setOption(optionOne);
      lineTwo.setOption(optionTwo);
      lineThree.setOption(optionThree);


      lineOne.on("datazoom", function (params) {
   
      console.log(params);
        //获得图表数据数组下标
        var startValue = lineOne.getModel().option.dataZoom[0].startValue;
        var endValue = lineOne.getModel().option.dataZoom[0].endValue;

        // 图一联动
       //获得起止位置百分比
        var startPercentOne = lineOne.getModel().option.dataZoom[0].start;
        var endPercentOne = lineOne.getModel().option.dataZoom[0].end;


        optionTwo.dataZoom[0].start = startPercentOne;
        optionTwo.dataZoom[0].end = endPercentOne;
        lineTwo.setOption(optionTwo);


        optionThree.dataZoom[0].start = startPercentOne;
        optionThree.dataZoom[0].end = endPercentOne;
        lineThree.setOption(optionThree);
      });


      lineTwo.on("datazoom", function (params) {
        // 图二联动
        //获得起止位置百分比
        var startPercentTwo = lineTwo.getModel().option.dataZoom[0].start;
        var endPercentTwo = lineTwo.getModel().option.dataZoom[0].end;

        optionOne.dataZoom[0].start = startPercentTwo;
        console.log(startPercentTwo, optionOne.dataZoom[0].start, "图二联动");
        optionOne.dataZoom[0].end = endPercentTwo;
        lineOne.setOption(optionOne);


        optionThree.dataZoom[0].start = startPercentTwo;
        optionThree.dataZoom[0].end = endPercentTwo;
        lineThree.setOption(optionThree);
      });

      lineThree.on("datazoom", function (params) {
        // 图三联动
        //获得起止位置百分比
        var startPercentThree = lineThree.getModel().option.dataZoom[0].start;
        var endPercentThree = lineThree.getModel().option.dataZoom[0].end;

        optionTwo.dataZoom[0].start = startPercentThree;
        optionTwo.dataZoom[0].end = endPercentThree;
        lineTwo.setOption(optionTwo);

        optionOne.dataZoom[0].start = startPercentThree;
        optionOne.dataZoom[0].end = endPercentThree;
        lineOne.setOption(optionOne);
      });
    },
  },
};
</script>


<style>
</style>

 实现效果：当图一的dataZoom发生变化，图二以及图三的dataZoom也会变化。同理可得，图二的dataZoom发生变化，图一以及图三的dataZoom也会发生变化。同理可得，图三也是如此。