Я хочу отобразить легенду круга в шаблоне vue 3, чтобы значение метки легенды было в процентах.
Я могу отображать данные серии.
Мой код:
<template>
<el-card class = "dvs-online-statistic">
<div class = "dvs-online-statistic__chart-header">
<div class = "dvs-online-statistic__chart-title">Type of ID</div>
<div class = "export-chart" @click = "exportChart">
<i class = "el-icon-upload2"></i>
Export
</div>
</div>
<div class = "dvs-online-statistic__success-type" v-loading = "isLoadingTypeOfId">
<highcharts :options = "options" ref = "chart"></highcharts>
<div class = "dvs-online-statistic__symbols">
<div class = "dvs-online-statistic__series-value" v-for = "item in options.series[0].data">
<div class = "pie-point">
<span :style = "{color: item.color}"
>
{{ options.series[0].marker.symbol }}
</span>
</div>
<div>
<div class = "pie-legend-name">
{{ item.name }}
</div>
<div class = "pie-legend-value">
{{ item.y }}
</div>
</div>
</div>
</div>
</div>
</el-card>
data() {
return {
isLoadingTypeOfId: false,
options: {
chart: {
type: 'pie',
spacingLeft: 0,
height: 236,
width: 240
},
credits: {
enabled: false
},
title: {
text: ''
},
legend: {
enabled: false
},
tooltip: {
formatter() {
return `${this.point.name}: ${Math.round(this.y)}`
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
point: {
events: {
legendItemClick() {
return false
}
}
}
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: [
{
innerSize: '75%',
data: [
{ название: 'АА', у: 1, цвет: '#8DCEEB' }, { название: 'АА', у: 2, цвет: '# 5A86EB' }, { название: 'АА', у: 3, цвет: '#9241F1' }, { название: 'АА', у: 4, цвет: '# 515D6C' }, { название: 'АА', у: 5, цвет: '#FEC0CA' }, { название: 'АА', у: 6, цвет: '# F8B14D' }], маркер: { символ: '\u25CF' } } ] } } }
Результат: введите здесь описание изображения
Должно быть введите здесь описание изображения
Вы можете рассчитать процентные значения на основе суммы данных или получить их из созданной диаграммы.
Например:
<template>
<div id = "app">
<highcharts
:options = "options"
ref = "chartRef"
></highcharts>
<div>
<div
:key = "item.id"
v-for = "item in chart?.series[0].points"
>
<div class = "pie-point">
<span :style = "{ color: item.color }">
{{ options.series[0].marker.symbol }}
</span>
</div>
<div>
<div>
{{ item.name }}
</div>
<div>
{{ Math.round(item.percentage) }}%
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
...,
mounted(){
this.chart = this.$refs.chartRef.chart;
},
data() {
return {
chart: null,
options: {...}
};
}
};
</script>
Живая демонстрация: https://stackblitz.com/edit/vue-qdsgo1?file=src%2FApp.vue
Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Point#percentage