Kemas kini data dinamik dan pengoptimuman paparan carta statistik Vue

Kemas kini data dinamik dan pengoptimuman paparan carta statistik Vue

Pengenalan:
Dalam era dipacu data hari ini, penggunaan carta statistik menjadi semakin meluas. Menggunakan Vue sebagai rangka kerja pembangunan bahagian hadapan, digabungkan dengan pelbagai perpustakaan carta yang sangat baik, anda boleh melaksanakan pelbagai jenis carta statistik dengan mudah. Walau bagaimanapun, apabila data berubah dengan kerap dan carta statistik perlu dikemas kini dan dipaparkan secara dinamik, kami perlu mempertimbangkan beberapa strategi pengoptimuman untuk meningkatkan prestasi halaman dan pengalaman pengguna.

Artikel ini akan memperkenalkan cara melaksanakan kemas kini data dinamik dan memaparkan pengoptimuman carta statistik dalam Vue. Kami akan menggunakan ECharts sebagai perpustakaan carta sampel dan memperkenalkan teknologi berkaitan dengan contoh kod.

1. Kemas kini data dinamik

1. Memantau perubahan data
   Dalam Vue, anda boleh menggunakan atribut jam tangan untuk memantau perubahan data. Apabila data yang dipantau berubah, operasi yang sepadan boleh dilaksanakan dalam fungsi panggil balik.

<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>

Dalam kod di atas, kami memantau perubahan dalam data cartaData melalui atribut jam tangan. Apabila data berubah, hubungi kaedah kemas kini Carta untuk mengemas kini carta. Dalam fungsi cangkuk yang dikemas kini, kaedah kemas kiniChart juga dipanggil semula untuk memastikan carta boleh dipaparkan semula selepas data dikemas kini. Apabila komponen dimusnahkan, carta dimusnahkan melalui fungsi cangkuk yang dimusnahkan untuk melepaskan sumber.

2. Strategi pendikit untuk mengoptimumkan prestasi
   Apabila data kerap berubah, kami boleh menggunakan strategi pendikit untuk mengelakkan kemas kini carta yang kerap untuk meningkatkan prestasi. Vue menyediakan pemalam vue-throttle-event untuk melaksanakan strategi pendikit dengan mudah.

Pasang pemalam:

npm install vue-throttle-event

Gunakan pemalam:

<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>

Dalam kod di atas, kami mengimport fungsi pendikit dan menggunakannya dalam fungsi cangkuk yang dikemas kini untuk mencetuskan kaedah Carta kemas kini setiap 100ms untuk mengelakkan carta kerap kemas kini.

2. Pengoptimuman paparan

1. Pemuatan tatal maya
   Apabila jumlah data dalam carta statistik adalah sangat besar, pemaparan terus semua data boleh menyebabkan halaman menjadi beku dan menjejaskan pengalaman pengguna. Pada masa ini, anda boleh menggunakan teknologi pemuatan tatal maya untuk memaparkan hanya data dalam kawasan yang boleh dilihat.

Dalam Vue, kami boleh menggunakan pemalam vue-virtual-scroll-list untuk melaksanakan pemuatan tatal maya.

Pasang pemalam:

npm install vue-virtual-scroll-list

Gunakan pemalam:

<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>

Dalam kod di atas, kami melaksanakan pemuatan tatal maya melalui pemalam vue-virtual-scroll-list. Tentukan saiz setiap elemen dengan menetapkan atribut saiz, atribut data menentukan sumber data dan atribut keyField menentukan medan kunci utama data. Kemudian, lalui data visibleData dalam v-for untuk mencapai kesan pemuatan tatal maya. Apabila data berubah, data dalam kawasan yang boleh dilihat dikira semula melalui kaedah presetVisibleData.

Kesimpulan:
Artikel ini memperkenalkan cara melaksanakan kemas kini data dinamik dan memaparkan pengoptimuman carta statistik dalam Vue. Dengan memantau perubahan data dan menggunakan teknologi seperti strategi pendikitan dan pemuatan tatal maya, prestasi halaman dan pengalaman pengguna boleh dipertingkatkan. Sudah tentu, mengikut keperluan sebenar, ia juga boleh digabungkan dengan teknologi lain untuk lebih pengoptimuman bagi memenuhi keperluan perniagaan yang berbeza. Saya harap artikel ini dapat memberi anda sedikit bantuan dalam menggunakan carta statistik dalam Vue.

Atas ialah kandungan terperinci Kemas kini data dinamik dan pengoptimuman paparan carta statistik Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!