解决echarts饼图不显示数据为0的数据

时间:2022-04-14 00:07:28

解决echarts饼图不显示数据为0的数据

如图所示 饼图数据为0但是还是会显示lableline和lable

解决方法

var echartData = [{

value: data_arry[0]==0?null:data_arry[0],

name: '常驻人口'

}]

传数据时判断数据是否为0,如果为0的话 就填入null

解决echarts饼图不显示数据为0的数据

  • 饼图代码

    var scale = 1;

    var echartData = [{

    value: 54,

    name: '常驻人口'

    }, {

    value: null,

    name: 'VIP客户'

    }, {

    value: null,

    name : '工作人员'

    }, {

    value: 546,

    name: '黑名单'

    },

    {

    value: 245,

    name: '空巢老人'

    },{

    value: 545,

    name: '未登记人口'

    }, ];

    var rich = {

      total: {
    color: "#333333",
    fontSize: 45 * scale,
    align: 'center'
    },
    chart_text:{
    fontSize:14*scale,
    }

    }

    option = {

    backgroundColor: '#fff',

    title: {

    text: '人流量',

    left: 'center',

    top: '50%',

    padding: [24, 0],

    textStyle: {

    color: '#333333',

    fontSize: 20 * scale,

    align: 'center'

    }

    },

    legend: {

    selectedMode: false,

    formatter: function(name) {

    var total = 0; //各科正确率总和

    var averagePercent; //综合正确率

    echartData.forEach(function(value, index, array) {

    total += value.value;

    });

    return '{total|' + total + '}';

    },

    data: [echartData[0].name],

    left: 'center',

    top: 'center',

    icon: 'none',

    align: 'center',

    textStyle: {

    color: "#fff",

    fontSize: 16 * scale,

    rich: rich

    },

    },

    series: [{

    name: '人流量',

    type: 'pie',

    radius: ['42%', '50%'],

    hoverAnimation: true,

    color: ['#2DB7F5', '#7DC856','#999999', '#F3857B', '#8996E6', '#F9BF00' ],

    label: {

    normal: {

    formatter: function(params, ticket, callback) {

    var total = 0; //

    var percent = 0; //

    echartData.forEach(function(value, index, array) {

    total += value.value;

    });

    percent = ((params.value / total) * 100).toFixed(1);

    if(params.value==0)

    return null;

    else

    return '{chart_text|' + params.name + '}\n{chart_text|' + params.value + '人}\n{chart_text|' + percent + '%}';

    },

    rich:rich,

    },

    },

    data: echartData

    }]

    };