#vue.js #vuejs3 #apexcharts
Вопрос:
существует API REST, который возвращает массив имен и сумм(пример см. Ниже). Я создал vue3.js компонент, который запрашивает API и визуализирует данные с помощью диаграммы пончиков VueApexCharts. Это работает. Однако что мне нужно изменить, чтобы добавить имена, возвращенные при вызове API, в легенду диаграммы? У меня нет доступа к диаграммам, которые определены в разделе data ().
[
{
"Name": "Somename",
"Amount": 100,
},
{
"Name": "Othername",
"Amount": 100,
}
] Код vue3.js компонент
< script lang = "ts" >
import {
defineComponent
} from 'vue'
import {
onMounted,
ref
} from 'vue'
import axios from 'axios'
import VueApexCharts from "vue3-apexcharts";
export default defineComponent({
components: {
apexchart: VueApexCharts,
},
data() {
return {
// series: [10, 20, 30],
chartOptions: {
chart: {
width: 380,
type: 'donut',
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 270
}
},
dataLabels: {
enabled: false
},
fill: {
type: 'gradient',
},
legend: {
formatter: function(val, opts) {
return val " - " opts.w.globals.series[opts.seriesIndex]
}
},
title: {
text: 'Gradient Donut with custom Start-angle'
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
}
}
},
name: 'HelloWorld',
props: {
msg: String,
},
setup() {
const series = ref([0]);
onMounted(async() => {
const res = await axios.get("http://127.0.0.1:5000/backend");
res['data'].forEach(function(value) {
series.value.push(value['ValueInEUR'])
});
});
return {
series
};
},
}) <
/script> <template>
<div id="chart">
<apexchart type="donut" width="380" :options="chartOptions" :series="series"></apexchart>
</div>
</template> Ответ №1:
Я думаю, вам просто нужно перейти chartOptions setup и назначить label chartOptions .
Вот кодовое поле:
https://codesandbox.io/s/sleepy-flower-772qz?file=/src/components/HelloWorld.vue
setup() {
const chartOptions = ref({
chart: { ... },
plotOptions: { ... },
dataLabels: { ... },
fill: { ... },
legend: { ... },
title: { ... },
labels: [], // add a empty labels to be ready for assignment
responsive: [ ... ],
});
onMounted(async () => {
const res = await axios.get("http://127.0.0.1:5000/backend");
res["data"].forEach(function(value) {
series.value.push(value["ValueInEUR"]);
// construct and assign label here
chartOptions.value.labels.push(value["Name"] as never);
});
});
return {
series,
chartOptions, // return chartOptions
};
}
Комментарии:
1. Здорово. Спасибо!