vue项目中Echarts饼图数值全为0时,比例出现undefined解决方案
项目场景:项目中数据看盘需要显示饼图并且显示比例(百分比)
·
项目场景:
项目场景:项目中数据看盘需要显示饼图并且显示比例(百分比)
问题描述
项目中一般会封装echarts,但是当两个参数为0时,比例就会出现undefined:
var option1 = {
title: {
text: '性别占比',
x: 'center'
},
tooltip: {},
legend: {
data: ['人数']
},
series: [{
name: '',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
color: ['#37A2DA', '#32C5E9'],
label: {
normal: {
show: true,
formatter: '{b}: {c}({d}%)'
}
},
// roseType: 'angle',
data: [ // 数据数组,name 为数据项名称,value 为数据项值
{
value: 0,
name: '男生'
}, {
value: 0,
name: '女生'
}
]
}]
};
原因分析:
这里因为我们用到了echarts中的 formatter: ‘{b}: {c}({d}%)’ ,然而data中的两个value都为0,params.percent的值是无法计算出来的,因此需要我们自行计算
解决方案:
其实很好解决,代码如下
formatter: function (params) {
if (params.percent === undefined) {
return params.name + 50 + '%'
} else if (params.percent === 0) {
return params.name + params.percent + '%'
} else {
return params.name + params.percent + '%'
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)