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:false},labelLine:{show:false}},
                {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}},
            ],
            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>

顯示效果：