echart 餅圖數據為0不顯示或者太小顯示其他的解決辦法


餅圖數據為0或者太小顯示如下,不美觀

 

解決辦法:

為0的去掉,小於0.005的累加起來

方法

function getsData(_rowData){
    var rowData=JSON.parse(JSON.stringify(_rowData))
    var sum=rowData.reduce(function(o,v,i){
        o+=parseFloat(v.value);
        return o;
    },0)
    if(isNaN(sum)||sum==0){return []}
    rowData.sort(function(a,b){
        return a.value-b.value;
    }).reverse();
    var val=0;//其他的相加
    for(var i=rowData.length-1;i>0;i--){
        var _row=rowData[i],sub;
        sub=_row.value/sum;
        //如果為0或者小於.05的比例就將此元素移除
        if(sub<0.005){
            rowData.length=i;//去掉最后一個
            val+=parseFloat(_row.value);
        }
    }
    //在后面追加一個其他的項
    if(val>0){
        rowData[length].name="其他";
        rowData[length].value=val;
    }
    return rowData;
}

效果圖

 

完整的option

var testData=[
                {value:3331, name:'直接訪問'},
                {value:3110, name:'郵件營銷'},
                {value:234, name:'聯盟廣告'},
                {value:0, name:'聯盟廣告'},
                {value:10, name:'聯盟廣告1'},
                {value:10, name:'聯盟廣告22'},
                {value:10, name:'聯盟廣告122'},
                {value:10, name:'聯盟廣告333'},
                {value:20, name:'聯盟廣告3'},
                {value:10, name:'聯盟廣告4'},
                {value:11135, name:'視頻廣告'},
                {value:11548, name:'搜索引擎'}
            ],
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:getsData(testData),
           //data:testData,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
function getsData(_rowData){
    var rowData=JSON.parse(JSON.stringify(_rowData))
    var sum=rowData.reduce(function(o,v,i){
        o+=parseFloat(v.value);
        return o;
    },0)
    if(isNaN(sum)||sum==0){return []}
    rowData.sort(function(a,b){
        return a.value-b.value;
    }).reverse();
    var val=0;//其他的相加
    for(var i=rowData.length-1;i>0;i--){
        var _row=rowData[i],sub;
        sub=_row.value/sum;
        //如果為0或者小於.05的比例就將此元素移除
        if(sub<0.005){
            rowData.length=i;//去掉最后一個
            val+=parseFloat(_row.value);
        }
    }
    //在后面追加一個其他的項
    if(val>0){
        rowData[length].name="其他";
        rowData[length].value=val;
    }
    return rowData;
}
View Code

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM