在Vue中实现图表数据的动态展示的示例代码

npm install -g @vue/cli
vue create dynamic-chart-demo

cd dynamic-chart-demo
npm install chart.js vue-chartjs

<template>
  <div>
    <h2>动态数据图表</h2>
    <LineChart :chartData="chartData" />
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Line } from 'vue-chartjs';
import {
  Chart as ChartJS,
  LineElement,
  PointElement,
  LinearScale,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

// 注册所需的Chart.js组件
ChartJS.register(LineElement, PointElement, LinearScale, Title, Tooltip, Legend);

// 创建一个响应式的 chartData，使用 ref 来定义
const chartData = ref({
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: '示例数据',
      data: [40, 39, 10, 40, 39, 80, 40],
      borderColor: '#42A5F5',
      backgroundColor: '#42A5F5',
      fill: false,
    },
  ],
});

// 更新数据的方法
function updateData() {
  const newData = Array.from({ length: 7 }, () => Math.floor(Math.random() * 100));
  chartData.value.datasets[0].data = newData;
}
</script>

<style scoped>
h2 {
  text-align: center;
}
</style>

<template>
  <div id="app">
    <DynamicChart />
  </div>
</template>

<script setup>
import DynamicChart from './components/DynamicChart.vue';
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

npm run serve