我是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。加载图表需要一段时间,然后在控制台中抛出错误。
1条答案
按热度按时间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