Echart使用之餅圖的問題

1、問題描述

1. 在項目之中，咱們有時候指望的圖以下：

   
   

   
   

2. 結果效果以下：

   咱們看到，百分比都是亂碼了，而後，像數量什麼的，若是是0,下面的圖就不會顯示。

2、解決辦法，咱們採起逐個擊破的方法。

    1.首先看那種數量爲0，顯示不了的問題，代碼以下：

var mychart = echarts.init(document.getElementById(elementID));
var labelTop = {
    normal : {
        label : {
            show : true,
            position : 'center',
            textStyle: {
                baseline : 'bottom'
            }
        },
        labelLine : {
            show : false
        }
    }
};
var labelBottom = {
    normal : {
        color: '#ccc',
        label : {
            show : true,
            position : 'center',
            formatter : function(a,b,c){return c.toString() },
            textStyle: {
                baseline : 'top'
            }
        },
        labelLine : {
            show : false
        }
    },
    emphasis: {
        color: 'rgba(0,0,0,0)'
    }
};
var radius = [28, 29];
var option = {
    toolbox: {
        show : false,
    },
    series : [
    {
        type : 'pie',
        center : ['50%', '50%'], //圓心座標
        radius : radius,         //內徑和外徑
        data : [
            {name:'other', value:Count, itemStyle : labelBottom},
            {name:'', value:0, itemStyle : labelTop}
        ]
    }
    ]
};
mychart.setOption( option );

    咱們先來理解下這段代碼：

1>.這兩個變量labelBottom、labelTop來設置圖型樣式，裏面包括：像圓圈的顏色color，還有 labelLine-標籤視覺引導線，最重要的就是這個label裏面能夠顯示咱們要顯示的數量或者百分比。

2>.還有一個蠻重要的就是series.data變量了，會根據裏面有多少項，而後根據本項的value值在全部項的value值裏面的佔的比例，本項的顏色圈弧會在總的圓圈中佔必定的比例。例以下圖:

data : [
{name:'other', value:50, itemStyle : labelBottom},//將用戶傳進來的數量原樣顯示
{name:'', value:50, itemStyle : labelTop}
]

       因此第一個問題就能夠迎刃而解，在最開始貼的代碼中，能夠看到，第二個value值爲0，當第一爲0的時候，天然就會沒有外面的圓圈，全部必定要把第二個value值不爲0，就給一個1，咱們只用第一value值，第二個不用，就算第一個value值爲0，可是第二個value值不爲0，天然會有圓圈，可是，第二個顏色會佔一部分，因此能夠把第一個和第二個的顏色設置成爲同樣了，這樣就解決了這個問題了。

3>還有一個問題

formatter : function(a,b,c){return c.toString() },

這個c.toString()，在新的2.2.1版本中會報錯，能夠改爲以下：

formatter :  "{c}",

最後變爲：

var mychart = echarts.init(document.getElementById("main"));
var labelTop = {
normal : {
color:'#b4b4b4',
label : {
show : true,
position : 'center',
textStyle: {
baseline : 'middle'
}
},
labelLine : {
show : false
}
}
};
var labelBottom = {
normal : {
color: '#b4b4b4',
label : {
show : true,
position : 'center',
formatter :  "{c}",
textStyle: {
baseline : 'middle'
}
},
labelLine : {
show : false
}
},
emphasis: {
color: '#b4b4b4',
}
};
var radius = [28, 29];
var option = {
toolbox: {
show : false,
},
series : [
{
type : 'pie',
center : ['50%', '50%'],
radius : radius,
data : [
{name:'other', value:50, itemStyle : labelBottom},//將用戶傳進來的數量原樣顯示
{name:'', value:1, itemStyle : labelTop}
]
}
]
};
mychart.setOption( option );
</script>

2.就是那個百分比亂碼的問題。

其實就是這個formatter的問題,

var mychart = echarts.init(document.getElementById(elementID));
var labelTop = {
normal : {
label : {
show : true,
position : 'center',
textStyle: {
baseline : 'bottom'
}
},
labelLine : {
show : false
}
}
};
var labelBottom = {
normal : {
color: '#ccc',
label : {
show : true,
position : 'center',
formatter : function(a,b,c){return 100 - c + '%'},
textStyle: {
baseline : 'top'
}
},
labelLine : {
show : false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
};
var radius = [27, 30];
var option = {
toolbox: {
show : false,
},
series : [
{
type : 'pie',
center : ['50%', '50%'],
radius : radius,
data : [
{name:'other', value:100-elementPercent, itemStyle : labelBottom},
{name:'', value:elementPercent,itemStyle : labelTop}
]
}
]
};
mychart.setOption( option );
};

其實就是：

formatter : function(a,b,c){return 100 - c + '%'},

這兒的問題，咱們先看一個這函數，在2.2.1版本一樣的表示方法能夠爲：

 formatter : function (params){
                return 100 - params.value + '%'
            },

咱們來研究一下formatter對於餅圖下的狀況

• 餅圖、雷達圖、儀表盤、漏斗圖: a（系列名稱），b（數據項名稱），c（數值）, d（餅圖：百分比 | 雷達圖：指標名稱）

因此能夠直接這樣顯示百分比，不用本身還去運算：

formatter :  "{d}%",

因此上面的代碼也很彆扭，傳給第二個data項的百分比，確實經過第一data項的label顯示出來，因此能夠修改下labelBottom、和labelTop裏面的label，由於要顯示第二個的百分比，j因此能夠刪去第一個label中的formater這行代碼，只在第二個label中加入下面這句代碼:

formatter :  "{d}%",

最後的代碼以下：

var mychart = echarts.init(document.getElementById("main"));
var labelTop = {
    normal : {
        color:'#5eb9ef',
        label : {
            show : true,         //讓其顯示出來
            position : 'center',
            formatter :  "{d}%",  //名字和對應的data項在總的佔的百分比
            textStyle: {
                baseline : 'middle'
            }
        },
        labelLine : {
            show : true  
        }
    }
};
var labelBottom = {
    normal : {
        color: '#b4b4b4',
        label : {
            show : false,
            position : 'center',
            textStyle: {
                baseline : 'middle'
            }
        },
        labelLine : {
            show : false  // 不讓那條線給顯示出來
        }
    },
    emphasis: {
        color: '#b4b4b4',
    }
};
var radius = [28, 39];
var option = {
    toolbox: {
    show : false,
    },
    series : [
    {
        type : 'pie',
        center : ['50%', '50%'],
        radius : radius,
        data : [
            {name:'other', value:(1-0.2), itemStyle : labelBottom},//這兒value是用戶傳進來的百分比數據
            {name:'aaaaa', value:(0.2), itemStyle : labelTop}
        ]
    }
    ]
};
mychart.setOption( option );

至此，基本問題就解決了！