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

 Echarts-App.vue

1.  
   <template>
2.  
   <div class="box">
3.  
   <div ref="radarRef" style="eidth: 199.9995px; height: 450px" />
4.  
   <EchartsTable :data="tabledata" />
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script>
9.  
   import EchartsTable from "./Echarts-table.vue";
10.  
    import * as echarts from "echarts";
11.  
    export default {
12.  
    components: {
13.  
    EchartsTable,
14.  
    },
15.  
    data() {
16.  
    return {
17.  
    tabledata: [],
18.  
    };
19.  
    },
20.  
     
21.  
    // echarts
22.  
    mounted() {
23.  
    var chartDom = this.$refs.radarRef;
24.  
    var myChart = echarts.init(chartDom);
25.  
     
26.  
    let base = new Date(2001, 9, 3);
27.  
    let oneDay = 24 * 3600 * 1000;
28.  
    let data = [[base, Math.random() * 300]];
29.  
     
30.  
    for (let i = 1; i < 100; i ) {
31.  
    let now = new Date((base = oneDay));
32.  
    data.push([
33.  
    now,
34.  
    Math.round((Math.random() - 0.5) * 20 data[i - 1][1]),
35.  
    ]);
36.  
    }
37.  
    // this.tabledata = data;
38.  
    // console.log(data);
39.  
    data.forEach((item) => {
40.  
    this.tabledata.push({ date: item[0], name: item[1] });
41.  
    });
42.  
     
43.  
    var option = {
44.  
    tooltip: {
45.  
    trigger: "axis",
46.  
    position: function (pt) {
47.  
    return [pt[0], "10%"];
48.  
    },
49.  
    },
50.  
    title: {
51.  
    left: "center",
52.  
    text: "每日销售额",
53.  
    },
54.  
    toolbox: {
55.  
    feature: {
56.  
    dataZoom: {
57.  
    yAxisIndex: "none",
58.  
    },
59.  
    restore: {},
60.  
    saveAsImage: {},
61.  
    },
62.  
    },
63.  
    grid: {
64.  
    left: "3%",
65.  
    right: "4%",
66.  
    bottom: "15%",
67.  
    containLabel: true,
68.  
    },
69.  
    xAxis: {
70.  
    type: "time",
71.  
    boundaryGap: false,
72.  
    },
73.  
    yAxis: {
74.  
    name: "组合久期", // 修改坐标轴名称
75.  
    type: "value",
76.  
    boundaryGap: [0, "100%"],
77.  
    },
78.  
    dataZoom: [
79.  
    {
80.  
    type: "inside",
81.  
    start: 0,
82.  
    end: 20,
83.  
    },
84.  
    {
85.  
    start: 0,
86.  
    end: 20,
87.  
    },
88.  
    ],
89.  
    series: [
90.  
    {
91.  
    name: "组合久期",
92.  
    type: "line",
93.  
    smooth: true,
94.  
    symbol: "none",
95.  
    areaStyle: {},
96.  
    data: data,
97.  
    },
98.  
    ],
99.  
    };
100.  
     myChart.setOption(option);
101.  
      
102.  
     // 监听datazoom事件
103.  
     myChart.on("dataZoom", (params) => {
104.  
     console.log(params);
105.  
      
106.  
     // 已知开始结束的百分比，还有数据的长度，用开始结束的百分比成上数据的长度获得数据
107.  
     // 的下标，
108.  
      
109.  
     let start = (params.start / 100) * data.length; // 开始百分比 除以 100 乘 数据长度
110.  
     console.log("数组下标", start);
111.  
     let startValue = Math.round(start);
112.  
     console.log("取整", startValue);
113.  
      
114.  
     let end = (params.end / 100) * data.length;
115.  
     console.log(end);
116.  
     let endValue = Math.round(end);
117.  
     console.log(endValue);
118.  
      
119.  
     let dataValue = data;
120.  
     console.log(dataValue);
121.  
     data[Math.round(start, end)];
122.  
     console.log(data[Math.round(start, end)]);
123.  
     // data[Math.round(end)]
124.  
     // console.log(data[Math.round(end)]);
125.  
     let dataZoomValue = data.slice(startValue, endValue);
126.  
     console.log(dataZoomValue);
127.  
     this.tabledata.splice(0);
128.  
     dataZoomValue.forEach((item) => {
129.  
     this.tabledata.push({
130.  
     date: item[0],
131.  
     name: item[1],
132.  
     });
133.  
     });
134.  
     });
135.  
     // console.log(option);
136.  
     },
137.  
     };
138.  
     </script>
139.  
      
140.  
     <style>
141.  
     </style>

Echarts-table.vue

1.  
   ...<template>
2.  
   <div>
3.  
   <el-table :data="data" style="width: 50%">
4.  
   <el-table-column prop="date" label="日期"> </el-table-column>
5.  
   <el-table-column prop="name" label="组合久期"> </el-table-column>
6.  
   </el-table>
7.  
   </div>
8.  
   </template>
9.  
    
10.  
    <script>
11.  
    export default {
12.  
    data() {
13.  
    return {
14.  
    // tableData:[]
15.  
    };
16.  
    },
17.  
    props: ["data"],
18.  
    };
19.  
    </script>
20.  
     
21.  
    <style>
22.  
    </style>

这篇好文章是转载于：学新通技术网