可以通过设置“其他”数据项将剩余的数据项合并成一个,达到显示更多数据的效果。
下面是示例代码:
const data = {
series: [30, 40, 50, 60, 70, 80, 90, 100],
labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7', 'Data 8']
};
const options = {
chart: {
type: 'pie'
},
labels: data.labels,
series: data.series,
dataLabels: {
enabled: true,
formatter: function (val, opt) {
return opt.label + ": " + val
}
},
legend: {
show: true,
formatter: function (seriesName, opts) {
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
}
},
plotOptions: {
pie: {
customScale: 0.8,
donut: {
size: '70%'
},
expandOnClick: false,
dataLabels: {
minAngleToShowLabel: 20
}
}
}
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
// 将8个及以上的数据项合并成“其他”,并重新渲染图表
if (data.series.length > 7) {
let other = 0;
for (let i = 7; i < data.series.length; i++) {
other += data.series[i];
}
data.series.splice(7, data.series.length - 7, other);
data.labels.splice(7, data.labels.length - 7, "Other");
chart.updateSeries(data.series);
chart.updateOptions({ labels: data.labels });
}