Vue统计图表的动态数据更新和显示优化

<template>  <div>    <button @click="updateData">更新数据</button>    <div ref="chart"></div>  </div></template><script>import echarts from 'echarts';export default {  data() {    return {      chartData: [] //图表数据    }  },  mounted() {    this.initChart(); //初始化图表  },  methods: {    initChart() {      //初始化图表      const chart = echarts.init(this.$refs.chart);      //绑定数据      chart.setOption({        series: [{          type: 'bar',          data: this.chartData        }]      });    },    updateData() {      //模拟数据更新      this.chartData = [100, 200, 300, 400, 500, 600];    }  },  watch: {    chartData: {      handler() {        //数据变动时，更新图表        this.updateChart();      },      deep: true //深度监听    }  },  updated() {    //数据更新后，重新渲染图表    this.updateChart();  },  destroyed() {    //销毁图表    echarts.dispose(this.$refs.chart);  },  methods: {    updateChart() {      const chart = echarts.getInstanceByDom(this.$refs.chart);      chart.setOption({        series: [{          data: this.chartData        }]      });    }  }}</script>

npm install vue-throttle-event

<template>  ...</template><script>import { throttle } from 'vue-throttle-event';import echarts from 'echarts';export default {  data() {    ...  },  mounted() {    ...  },  ...  updated() {    //数据更新后，重新渲染图表，使用节流策略每100ms触发一次    throttle(this.updateChart, 100);  },  methods: {    ...  }}</script>

npm install vue-virtual-scroll-list

<template>  <div style="height: 600px;">    <div v-virtual-scroll="{      size: 50, //每个元素的大小      data: chartData, //数据源      keyField: 'id', //数据的主键字段      type: 'variable',      variableSize: true    }">      <div v-for="item in visibleData" :key="item.id">{{ item.value }}</div>    </div>  </div></template><script>import { VirtualScrollList } from 'vue-virtual-scroll-list';export default {  components: {    VirtualScrollList  },  data() {    return {      chartData: [], //图表数据      visibleData: [] //可视区域内的数据    }  },  mounted() {    //获取图表数据    this.getChartData();  },  methods: {    getChartData() {      //模拟异步获取图表数据      setTimeout(() => {        const data = [];        for (let i = 1; i <= 10000; i++) {          data.push({            id: i,            value: i          });        }        this.chartData = data;      }, 1000);    },    presetVisibleData(start, end) {      //根据起始位置和结束位置提取可视区域内的数据，start和end是元素在数据源中的索引值      this.visibleData = this.chartData.slice(start, end);    }  },  watch: {    chartData: {      handler() {        //数据变动时，更新可视区域内的数据        this.presetVisibleData(0, 50);      },      deep: true    }  },  updated() {    //针对数据变动，重新计算可视区域内的数据    this.presetVisibleData(0, 50);  }}</script>