Vue 3如何正确更新图表中的数据？

Question

用Vue.js 3在高图表中更新数据时出错

我有一个带有Vue.js 3的小型Week应用程序，它显示了一个高级图表图表和一些统计数据，带有用于时间过滤器的全局按钮(所有、年份、月份、周)。

每当按下一个全局按钮时，就需要更改我的高图表图表的数据。

我使用这个vue3包装器来绘制高级图表：包装器

显示初始数据(全部)就像一种魅力，但是当涉及到更新数据时，它真的很慢。这让我觉得我在更新数据时做错了什么。

我在YT：https://youtu.be/GEjHqoAElgI上上传了一个关于我的问题的视频

此外，我还在codesandbox上创建了一个最小可复制示例：https://codesandbox.io/s/blissful-goldwasser-zq8je?fontsize=14&hidenavigation=1&theme=dark

它由一个Chart.vue组件组成，当按下“更新数据”按钮时，该组件将其属性"data“更新。该按钮可以切换多次，它将始终需要几秒钟，直到图表被更新。

尝试将图表中的数据作为属性提供给我的组件，并让一个监视者对该数据进行监视，以便在数据发生更改时更新图表。这是可行的，但更新图表要花费很长时间(3-5秒)。这样做的推荐方法是什么？

这是我的组成部分：

<template>
  <VueHighcharts
    class="hc"
    :options="options"
    :deepCopyOnUpdate="true"
    :redrawOnUpdate="true"
    :oneToOneUpdate="false"
    :animateOnUpdate="false"
  />
</template>

<script>
import VueHighcharts from "vue3-highcharts";

export default {
  name: "CoinChart",
  components: {
    VueHighcharts,
  },
  props: {
    stats: [Object],
  },
  data() {
    return {
      options: {
        title: {
          text: "Coins",
        },
        series: [
          {
            name: "ETH",
            data: [],
          },
          {
            name: "BTC",
            data: [],
          },
        ],
      },
    };
  },
  watch: {
    stats: {
      immidiate: true, // as pointed out in the commments, this line does not do anything
      handler: function (val) {
        // create data for chart
        const eth = new Array();
        const btc = new Array();
        this.options.series[0].data = [];
        this.options.series[1].data = [];

        for (let i in val) {
          eth.push([val[i].time * 1000, val[i].coinsPerHour]);
          btc.push([val[i].time * 1000, val[i].btcPerHour]);
        }

        // set to chart
        this.options.series[0].data = eth;
        this.options.series[1].data = btc;
      },
    },
  },
};
</script>

这简直把我逼疯了，今天花了4个小时来解决这个问题，但没有成功。甚至考虑过切换到Chart.js，但显然也没有真正支持Vue.js 3。

Answer 1

我把事情搞清楚了。

显然，当您更新该系列时，高级图表将为现有系列分配新值，以便它可以计算任何动画。在你的例子中，这是相当沉重的，它需要2-3秒，这就是你所看到的。

显然，简单地丢弃图表(通过使用v-if)并用新的数据集重新呈现它会更快：

https://codesandbox.io/s/compassionate-darkness-nugv8?file=/src/components/Chart.vue:1159-1194