ECharts 提供了丰富的图表功能,其中饼图是一个常用的功能。
但是很多时候由于设置的数据量过多,导致图表显示非常拥挤,不利于用户快速阅读,提取有效信息。如下图所示:
此时可以将数据进行一下排序,将数值较小的数据进行合并显示,合并后的展示效果如下图所示:
可以看到合并后,整个图表看起来更加简洁,更能快速的得到一个大概的占比比例信息,方便了信息提取。
通过简单的代码处理就可以实现上述的数据合并展示:
/**
* 渲染饼图
* @param eleId 渲染的容器Id
* @param chartTitle 饼图标题(饼图上方展示)
* @param seriesName 鼠标悬停时显示信息的标题
* @param data 饼图绑定数据
*/
function setPieChart(eleId, chartTitle, seriesName, data) {
data = data.filter(d => d.value > 0);
if (!data || data.length == 0) {
data = [{ name: '暂无数据', value: 0 }];
}
//数据按数值从大到小排序
data = data.sort((a, b) => { return b.value - a.value });
const showCount = 9; //单独显示的数据条数
if (data.length > showCount) {
//数据大于9条时将前9条单独显示
let data9 = data.splice(0, 9);
let leftSum = 0;
//剩余数据合并
data.forEach(d => { leftSum += d.value; });
data = data9.concat({ name: '其他合计', value: leftSum });
}
let legendData = data.map(d => { return d.name; });
let option = {
title: {
text: chartTitle,
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: legendData
},
series: [
{
name: seriesName,
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
show: true,
formatter: '{b} :{c} ({d}%)',
}
}
]
};
let container = document.getElementById(eleId);
let chart = echarts.init(container);
chart.setOption(option);
return chart;
}
//模拟数据
let data = [
{ name: "V 1.0.1", value: 4 },
{ name: "V 1.0.2", value: 5 },
{ name: "V 1.0.3", value: 6 },
{ name: "V 1.0.4", value: 7 },
{ name: "V 1.0.5", value: 8 },
{ name: "V 2.0.1", value: 9 },
{ name: "V 2.0.2", value: 10 },
{ name: "V 2.0.3", value: 11 },
{ name: "V 2.0.4", value: 12 },
{ name: "V 2.0.5", value: 13 },
{ name: "V 3.0.1", value: 34 },
{ name: "V 3.0.2", value: 35 },
{ name: "V 3.0.3", value: 36 },
{ name: "V 3.0.4", value: 37 },
{ name: "V 3.0.5", value: 38 },
{ name: "V 4.0.1", value: 39 },
{ name: "V 4.0.2", value: 40 },
{ name: "V 4.0.3", value: 41 },
{ name: "V 4.0.4", value: 42 },
{ name: "V 4.0.5", value: 43 },
{ name: "V 5.0.1", value: 44 },
{ name: "V 5.0.2", value: 45 },
{ name: "V 5.0.3", value: 46 },
{ name: "V 5.0.4", value: 47 },
{ name: "V 5.0.5", value: 48 },
{ name: "V 6.0.1", value: 49 },
{ name: "V 6.0.2", value: 50 },
{ name: "V 6.0.3", value: 51 },
{ name: "V 6.0.4", value: 52 },
{ name: "V 6.0.5", value: 53 },
{ name: "V 7.0.1", value: 154 },
{ name: "V 7.0.2", value: 155 },
{ name: "V 7.0.3", value: 156 },
{ name: "V 7.0.4", value: 157 },
{ name: "V 7.0.5", value: 158 },
{ name: "V 8.0.1", value: 159 },
{ name: "V 8.0.2", value: 160 },
{ name: "V 8.0.3", value: 361 },
{ name: "V 8.0.4", value: 462 },
{ name: "V 8.0.5", value: 563 },
];
setPieChart("main", "终端版本统计", "版本数量", data);
可根据需要调整需要单独显示的数据条数。