echarts data里的value为0时隐藏显示 label为0时隐藏

版本echarts3

官方文档：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

先看一下源代码：

<script type="text/javascript">
option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
</script>

显示效果：

如果想隐藏引导线的和文字的话需要再data里加 label:{show:false},labelLine:{show:false},这样就可以单独对某个值进行隐藏显示了

下面是一个检索方式和数据判断，假设数据的value等于0的时候隐藏引导线和文字，循环全部的值逐个筛选

注意：每个data里都要写 label:{show:true},labelLine:{show:true} 作为默认值

<script type="text/javascript">
option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','我不想显示']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:0, name:'直接访问',label:{show:true},labelLine:{show:true}},
                {value:310, name:'邮件营销',label:{show:true},labelLine:{show:true}},
                {value:234, name:'联盟广告',label:{show:true},labelLine:{show:true}},
                {value:135, name:'视频广告',label:{show:true},labelLine:{show:true}},
                {value:1548, name:'搜索引擎',label:{show:true},labelLine:{show:true}},
                {value:110, name:'我不想显示',label:{show:false},labelLine:{show:false}},

            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
    
};
var opt = option.series[0];
lineHide(opt);
//数据为零时隐藏线段
function lineHide(opt) {
    //循环获取数据进行处理
    jQuery.each(opt.data, function (i, item) {
        //value等于0改变label与labelLine属性
        if (item.value === 0) {
            item.labelLine.show = false;
            item.label.show = false;
        }
    });
}

</script>

显示效果：

为0的直接访问没有显示，我们写的我不想显示默认值是false也没有显示

官方文档：http://www.echartsjs.com/option.html#series-pie.data.label

效果测试：http://www.echartsjs.com/examples/editor.html?c=pie-simple

参考：https://blog.****.net/u011768325/article/details/73499299