echarts滚动条滚动表格数据跟着变化

 Echarts-App.vue

<template>
  <div class="box">
    <div ref="radarRef" style="eidth: 199.9995px; height: 450px" />
    <EchartsTable :data="tabledata" />
  </div>
</template>
 
<script>
import EchartsTable from "./Echarts-table.vue";
import * as echarts from "echarts";
export default {
  components: {
    EchartsTable,
  },
  data() {
    return {
      tabledata: [],
    };
  },
 
  // echarts
  mounted() {
    var chartDom = this.$refs.radarRef;
    var myChart = echarts.init(chartDom);
 
    let base = +new Date(2001, 9, 3);
    let oneDay = 24 * 3600 * 1000;
    let data = [[base, Math.random() * 300]];
 
    for (let i = 1; i < 100; i++) {
      let now = new Date((base += oneDay));
      data.push([
        +now,
        Math.round((Math.random() - 0.5) * 20 + data[i - 1][1]),
      ]);
    }
    // this.tabledata = data;
    // console.log(data);
    data.forEach((item) => {
      this.tabledata.push({ date: item[0], name: item[1] });
    });
 
    var option = {
      tooltip: {
        trigger: "axis",
        position: function (pt) {
          return [pt[0], "10%"];
        },
      },
      title: {
        left: "center",
        text: "每日销售额",
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: "none",
          },
          restore: {},
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "time",
        boundaryGap: false,
      },
      yAxis: {
        name: "组合久期", // 修改坐标轴名称
        type: "value",
        boundaryGap: [0, "100%"],
      },
      dataZoom: [
        {
          type: "inside",
          start: 0,
          end: 20,
        },
        {
          start: 0,
          end: 20,
        },
      ],
      series: [
        {
          name: "组合久期",
          type: "line",
          smooth: true,
          symbol: "none",
          areaStyle: {},
          data: data,
        },
      ],
    };
    myChart.setOption(option);
 
    // 监听datazoom事件
    myChart.on("dataZoom", (params) => {
      console.log(params);
 
      //  已知开始结束的百分比，还有数据的长度，用开始结束的百分比成上数据的长度获得数据
      //  的下标，
 
      let start = (params.start / 100) * data.length; // 开始百分比 除以 100 乘 数据长度
      console.log("数组下标", start);
      let startValue = Math.round(start);
      console.log("取整", startValue);
 
      let end = (params.end / 100) * data.length;
      console.log(end);
      let endValue = Math.round(end);
      console.log(endValue);
 
      let dataValue = data;
      console.log(dataValue);
      data[Math.round(start, end)];
      console.log(data[Math.round(start, end)]);
      // data[Math.round(end)]
      // console.log(data[Math.round(end)]);
      let dataZoomValue = data.slice(startValue, endValue);
      console.log(dataZoomValue);
      this.tabledata.splice(0);
      dataZoomValue.forEach((item) => {
        this.tabledata.push({
          date: item[0],
          name: item[1],
        });
      });
    });
    // console.log(option);
  },
};
</script>
 
<style>
</style>复制

Echarts-table.vue

...<template>
  <div>
    <el-table :data="data" style="width: 50%">
      <el-table-column prop="date" label="日期"> </el-table-column>
      <el-table-column prop="name" label="组合久期"> </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default { 
  data() {
    return {
      // tableData:[]
    };
  },
  props: ["data"],
};
</script>
 
<style>
</style>复制