如何在 vuejs 中拥有多个具有不同序列数据的高图表，而无需重复代码

Question

我想在我的页面中有多个具有不同数据的高图表，而不必重复高图表代码。

这是我如何定义我的高图表

chartOptions: {
chart: {
type: "pie"
},
title: {
text: ""
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: "pointer",
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [
{ 
name: 'Comparison',
data: [],
},
]
},

我像这样称呼它为 html-

<highcharts :options="chartOptions"  id="chart1"></highcharts>

我使用事件总线侦听器将数据发送到高图表系列

EventBus.$on("btn-clicked", data => {
this.chartOptions.series[0].data = data.newData;
});

由于我使用的是 highchart-vuejs 包装器，因此我可以重复 highcharts，但所有图表都将获得相同的数据。有没有办法将数据发送到特定图表，使其与其他图表不同？

Answer 1

您将chartOptions传递到高图表组件中。如果你在父组件上定义了这个数据，Vue 会让它成为反应式的，所以当你改变数据时，图表会自动更新。

下面是如何工作的基本示例：

<template>
<div>
<highcharts :options="chartOptions[0]"></highcharts>
<highcharts :options="chartOptions[1]"></highcharts>
<button @click="changeData">Change data for first chart</button>
</div>
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
components: {
highcharts: Chart
},
data() {
return {
chartOptions: [
{
series: [
{
data: [1, 2, 3]
}
]
},
{
series: [
{
data: [4, 5, 6]
}
]
},
]
}
},
methods: {
changeData() {
this.chartOptions[0].series[0].data = [4, 8, 1];
}
}
};
</script>

编辑：

要使用相同的选项创建多个图表，您可以创建自定义图表组件，并仅将数据系列作为 prop 传入：

<template>
<highcharts :options="chartOptions"></highcharts>
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
name: 'CustomPie',
components: {
highcharts: Chart
},
props: ['data'],
data() {
return {
chartOptions: {
chart: {
type: "pie"
},
title: {
text: ""
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: "pointer",
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [
{ 
name: 'Comparison',
data: this.data,
},
]
},
}
},
watch: {
data(newVal) {
this.chartOptions.series[0].data = newVal;
}
}
};
</script>

请注意，您必须在data道具上设置一个观察程序，以便在数据更改时更新组件chartOptions。

您的父组件(您显示图表的位置(将如下所示：

<template>
<div>
<CustomPie :data="chartData1" />
<CustomPie :data="chartData2" />
<button @click="changeData">Change data for first chart</button>
</div>
</template>
<script>
import CustomPie from "./CustomPie";
export default {
components: {
CustomPie
},
data() {
return {
chartData1: [1,2,3],
chartData2: [4,5,6]
}
},
methods: {
changeData() {
this.chartData1 = [4, 8, 1];
}
}
};
</script>