数据过多,且几个比较小的数据在一块扎堆
解决方案 在series中的一个对象中 添加属性 minAngle
源码1,元数据部分:
#其中的两个红色加粗的为数值非常小的,在饼图中根据数据占比会非常小,用肉眼几乎看不出来。
let echartData = {
inner: [
{
value: 300,
unit: '件',
name: '第一检查部'
},
{
value: 100,
unit: '件',
name: '第二检查部'
},
{
value: 10,
unit: '件',
name: '第三检查部'
},
{
value: 160,
unit: '件',
name: '第四检查部'
},
{
value: 1,
unit: '件',
name: '第五检查部'
}
],
outer: [
{
value: 100,
unit: '件',
name: '第一检查部'
},
{
value: 300,
unit: '件',
name: '第二检查部'
},
{
value: 400,
unit: '件',
name: '第三检查部'
},
{
value: 400,
unit: '件',
name: '第四检查部'
},
{
value: 3,
unit: '件',
name: '第五检查部'
}
]
}
源码2:echart中的series部分
series: [
//最外层圆环
{
name: '外环',
type: 'pie',
minAngle: 10, //设置扇形的最小占比
radius: ['50%', '75%'],
center: ["40%", "50%"],
startAngle: '240',
data: echartData.outer,
labelLine: {
normal: {
length: 20,
length2: 140,
lineStyle: {
color: '#e6e6e6'
}
}
},
itemStyle: { // 此配置
normal: {
borderWidth: 2,
borderColor: '#fff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
position: 'inner',
formatter: params => {
return (
params.value + '件'
);
},
fontSize: 22,
color: '#000',
// padding: [0, -130, 25, -130],
}
},
},
{
name: '内环',
type: 'pie',
minAngle: 10,
radius: ['25%', '50%'],
center: ["40%", "50%"],
itemStyle: { // 此配置
normal: {
borderWidth: 2,
borderColor: '#fff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
position: 'inner',
formatter: params => {
return (
params.value + '件'
);
},
fontSize: 22,
color: '#000',
}
},
labelLine: {
normal: {
show: false
}
},
startAngle: '230',
data: echartData.inner
}
]
设置前
图中的箭头为所指向的两个占比,内环占比和外环占比
设置后
所以说通过
minAngle 属性 设置度数,就可以直接设置一个最小的占比度数,可以防止扇形过小的问题