Vue3 多个 Highcharts

Question

我是 Vue 的新手，正在努力使用 vue3-highcharts 在 Vue3 页面上显示多个 Highcarts。我遵循了 Reactive Chart Example here，效果很好，但我很困惑如何使用 v-for 为多个图表实现 chartOptions 对象。

使用以下代码的单个图表有效：

<vue-highcharts
    type="chart"
    :options="chartOptions"
    :redraw-on-update="true"
    :one-to-one-update="false"
    :animate-on-update="true"
    @updated="onUpdate"/>

和相关的设置/计算代码

setup() {
          const seriesData = ref([25, 39, 30, 15]);
          const categories = ref(['Jun', 'Jul', 'Aug', 'Sept']);
    
          const chartOptions = computed(() => ({
            chart: {
              type: 'line',
            },
            title: {
              text: 'Number of project stars',
            },
            xAxis: {
              categories: categories.value,
            },
            yAxis: {
              title: {
                text: 'Number of stars',
              },
            },
            series: [{
              name: 'New project stars',
              data: seriesData.value,
            }],
          }));

我尝试了多种方法来使用v-for加载多个图表，这里是最新/最成功的：

<vue-highcharts
  v-for="item in hmCharts"
  :key="item.id"
  :options="item.options"
  :redraw-on-update="true"
  :one-to-one-update="false"
  :animate-on-update="true"
  @rendered="onRender"
  @update="onUpdate"
  @destroy="onDestroy" />
  

const hmCharts = ref([
      {
        id: 'one',
        options: getChartoptions('one')
      },{
        id: 'two',
        options: getChartoptions('two')
      }])

 const seriesData  = [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117]] 

    hmCharts.value[0].options.series[0].data = seriesData
    hmCharts.value[1].options.series[0].data = seriesData

此方法最终会加载两个图表，但加载需要整整一分钟或更长时间。我在控制台中发现以下错误：

runtime-core.esm-bundler.js?9e79:6620 [Vue warn]: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

我花在这上面的时间和研究比我愿意承认的要多，真的希望有人能帮助我理解这里发生的事情。谢谢！

更新： 我创建了一个 codesandboxio 项目来重现该问题：codesandboxio project。加载图表需要一段时间，然后在控制台中抛出错误。

Answer 1

不将 hmCharts 包装在 ref 中似乎可以解决问题：
https://codesandbox.io/s/vue-highcharts-recursive-error-forked-gwqd4?file=/src/App.vue

它的要点是 Vue 无法监视 Highcharts 实例的反应性，因为它在各个级别包含自己，并且每当它内部发生变化（变异）时，Vue 都会尝试更新其依赖项, 创建一个永无止境的循环。

另一个修复方法是将 ref 替换为 shallowRef:
https://codesandbox.io/s/vue-highcharts-recursive-error-forked-qn46j?file=/src/App.vue

Vue3 多个 Highcharts

Vue3 Multiple Highcharts

javascript

highcharts

vue.js

vuejs3