highcharts Vue3多个高排行榜

rqcrx0a6  于 2022-11-24  发布在  Highcharts
关注(0)|答案(1)|浏览(183)

我是Vue的新手,很难使用vue 3-highcharts在Vue 3页面上显示多个Highcart。我遵循了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

此方法最终将加载两个图表,但加载需要整整一分钟或更长时间。我在控制台中发现以下错误:
运行时核心。esm捆绑器。js?9 e79:6620 [Vue警告]:超过了最大递归更新数。这意味着您有一个React性影响,即改变了它自己的依赖项,从而递归地触发了它自己。可能的源包括组件模板、呈现函数、更新的挂钩或监视器源函数。
我已经花了更多的时间和研究这比我愿意承认,真的希望有人能帮助我了解它发生在这里。谢谢!

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

u3r8eeie

u3r8eeie1#

不将hmCharts Package 在ref中似乎可以解决这个问题:
https://codesandbox.io/s/vue-highcharts-recursive-error-forked-gwqd4?file=/src/App.vue
其要点是Highcharts示例不能被Vue观察React性,因为它包含在不同的级别上,每次它内部有什么变化(变异),Vue都会尝试更新它的依赖关系,从而创建一个永无止境的循环。
另一个修复方法是将ref替换为shallowRef
https://codesandbox.io/s/vue-highcharts-recursive-error-forked-qn46j?file=/src/App.vue

相关问题