Vue框架下，如何实现实时监控的统计图表

npm install vue-chartjs chart.js socket.io-client

data() {
  return {
    chartData: [],
  }
},

created() {
  const socket = io('your_socket_server_url');
  socket.on('data', (data) => {
    this.chartData = data;
  });
},

import { Line } from 'vue-chartjs';

export default {
  extends: Line,
  props: ['data'],
  mounted() {
    this.renderChart(this.data, this.options);
  },
}

<template>
  <line-chart :data="chartData"></line-chart>
</template>

data() {
  return {
    options: {
      responsive: true, // 图表自适应
      maintainAspectRatio: false,
      scales: {
        xAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: '时间',
          },
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: '数据',
          },
        }],
      },
    },
  }
},

<style scoped>
.line-chart {
  width: 100%;
  height: 400px;
}
</style>

watch: {
  chartData() {
    this.$data._chart.destroy(); // 销毁之前的图表实例
    this.renderChart(this.chartData, this.options); // 重新渲染图表
  },
},

updated() {
  if (this.data !== this.$data._data) {
    this.$data._data = this.data;
    this.$data._chart.update();
  }
},