如何在Vue3中为PrimeVue Line Chart折线图动态添加数据

PrimeVue的Chart组件底层基于Chart.js封装，动态更新数据需要结合Vue响应式规则和Chart.js的更新机制实现，具体步骤如下：

步骤1：给Chart组件添加ref标识 #

修改模板代码，增加ref属性用于获取Chart实例：

<Chart ref="lineChart" type="line" :data="basicData" :options="basicOptions"/>

步骤2：实现addData方法 #

直接在你的methods中添加如下逻辑：

methods: {
  addData(newValue, newLabel) {
    // 新增数据到数据集末尾
    this.basicData.datasets[0].data.push(newValue)
    // 新增对应X轴标签
    this.basicData.labels.push(newLabel)

    // 可选配置：保持X轴最多显示7个数据，超出则删除最旧的第一条数据，实现滚动效果
    const maxShowCount = 7
    if (this.basicData.datasets[0].data.length > maxShowCount) {
      this.basicData.datasets[0].data.shift()
      this.basicData.labels.shift()
    }

    // 调用Chart实例的update方法触发重绘，性能最优
    this.$refs.lineChart.chart.update()
  }
}

可选：实现定时自动刷新的实时效果 #

如果需要自动定时新增数据，可以在生命周期钩子中添加定时器：

mounted() {
  // 每1秒生成模拟数据新增
  this.refreshTimer = setInterval(() => {
    // 模拟0-100的随机速度值
    const newSpeed = Math.round(Math.random() * 100)
    // 按现有X轴步长10生成新标签
    const lastLabel = Number(this.basicData.labels.at(-1))
    const newLabel = String(lastLabel + 10)
    this.addData(newSpeed, newLabel)
  }, 1000)
},
// Vue2环境请替换为beforeDestroy
beforeUnmount() {
  // 组件销毁前清除定时器，防止内存泄漏
  clearInterval(this.refreshTimer)
}

内容的提问来源于stack exchange，提问作者rafalimaz