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


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

解决方法

var echartData = [{
value: data_arry[0]==0?null:data_arry[0],
name: '常驻人口'
}]

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

  • 饼图代码

    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
    }]
    };

猜你喜欢

转载自www.cnblogs.com/lancelee98/p/9824962.html