我是 Vue 的新手，正在努力使用 vue3-highcharts 在 Vue3 頁面上顯示多個 Highcarts。我遵循了此處的Reactive Chart Example，它很好用，但我很困惑如何使用 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.
I have spent more time and research on this than I care to admit, and really hoping someone can help me understand what it happening here. Thanks!
Update: I created a codesandboxio project to reproduce the issue: codesandboxio project. It takes awhile to load the charts, and then throws errors in the console.
uj5u.com熱心網友回復：
不包裹hmCharts在 a 中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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/402903.html
標籤：
上一篇：Vue3不更新行內樣式
下一篇：在CI管道中運行開發服務器