可以使用Apexcharts的“多级”饼图选项来实现分组饼图。
代码示例:
HTML:
JavaScript:
var options = {
series: [44, 55, 41, 17, 15],
labels: ['A', 'B', 'C', 'D', 'E'],
chart: {
width: 380,
type: 'pie',
},
dataLabels: {
enabled: false
},
legend: {
formatter: function(val, opts) {
return val + " - " + opts.w.globals.series[opts.seriesIndex]
}
},
plotOptions: {
pie: {
expandOnClick: false,
donut: {
size: '85%',
}
}
},
tooltip: {
y: {
formatter: function(val) {
return val + " - " + Math.round(val / 100 * 100) + "%"
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
在这个例子中,我们将不同的类别按照它们所属的组分组,并将该组中的所有类别表示为一个单独的“多级饼图”。