vue实现动态折现图代码

下面是一个简单的 Vue 实现动态折线图的代码示例。

template:

<template>
  <div class="chart-container">
    <canvas ref="chart"></canvas>
  </div>
</template>

script:

import Chart from 'chart.js';

export default {
  data() {
    return {
      chartData: [],
      chart: null
    };
  },
  mounted() {
    this.chart = new Chart(this.$refs.chart, {
      type: 'line',
      data: {
        labels: [],
        datasets: [{
          label: 'Sales',
          data: [],
          borderColor: 'blue',
          fill: false
        }]
      },
      options: {
        responsive: true,
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{
            display: true,
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });

    setInterval(() => {
      this.addData(this.chartData);
      this.updateChart(this.chart, this.chartData);
    }, 500);
  },
  methods: {
    addData(data) {
      data.push(Math.floor(Math.random() * 100) + 1);
      if (data.length > 10) {
        data.shift();
      }
    },
    updateChart(chart, data) {
      chart.data.datasets[0].data = data;
      chart.data.labels = data.map((_, index) => `Label ${index}`);
      chart.update();
    }
  }
}

上面的代码使用 Chart.js 库创建了一个动态折线图。图表每隔 500 毫秒更新一次，数据由随机生成的数字组成。可以根据需求修改数据格式和更新频率。