项目场景:

项目场景:项目中数据看盘需要显示饼图并且显示比例(百分比)


问题描述

项目中一般会封装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 + '%'
	  }
	}
Logo

前往低代码交流专区

更多推荐