本篇文章為大家展示了怎么使用ECharts制作餅狀圖，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
在工作中如果遇到需要計(jì)算總費(fèi)用或金額的各個(gè)部分構(gòu)成比例的情況，一般都是通過(guò)各個(gè)部分與總額相除來(lái)計(jì)算，而且這種比例表示方法很抽象，我們可以使用一種餅形圖表工具，能夠直接以圖形的方式形象直觀(guān)的顯示各個(gè)組成部分所占比例
結(jié)合實(shí)例給大家分享站長(zhǎng)們常常用到的網(wǎng)站分析工具中的訪(fǎng)問(wèn)來(lái)源功能，我們使用Echarts制作餅狀圖，用于表現(xiàn)不同類(lèi)目（訪(fǎng)問(wèn)來(lái)源）的數(shù)據(jù)在總和中的占比。
和前幾篇文章介紹的一樣，首先引入Echarts，然后在需要放置圖表的地方加上p#myChart，同時(shí)給它加上寬度和高度屬性。
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('myChart'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a}
: {c} (squ6kqw%)"
},
legend: {
orient: 'horizontal',
left: 'center',
bottom: 0,
data:['直達(dá)','其它外鏈','搜索引擎','直接輸入網(wǎng)址或書(shū)簽','cnblogs.com','微博','微信','百度','谷歌','360','必應(yīng)','其他']
},
series: [
{
name:'訪(fǎng)問(wèn)來(lái)源', //內(nèi)環(huán)
type:'pie',
selectedMode: 'single', //單一選中模式
radius: [0, '30%'], //餅圖的半徑 [內(nèi)半徑，外半徑]
label: {
normal: {
position: 'inner' //內(nèi)置文本標(biāo)簽
}
},
labelLine: {
normal: {
show: false //不需要設(shè)置引導(dǎo)線(xiàn)
}
},
data:[
{value:335, name:'直達(dá)', selected:true},
{value:679, name:'其它外鏈'},
{value:1548, name:'搜索引擎'}
]
},
{
name:'訪(fǎng)問(wèn)來(lái)源',
type:'pie',
radius: ['40%', '55%'],
data:[
{value:335, name:'直接輸入網(wǎng)址或書(shū)簽'},
{value:310, name:'cnblogs.com'},
{value:234, name:'微博'},
{value:135, name:'微信'},
{value:1048, name:'百度'},
{value:251, name:'谷歌'},
{value:147, name:'360'},
{value:42, name:'必應(yīng)'},
{value:60, name:'其他'}
]
}
]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
以上代碼中，繪制了兩個(gè)換，內(nèi)環(huán)和外環(huán)，內(nèi)環(huán)是大類(lèi)，本例中有3個(gè)大類(lèi)，外環(huán)是3個(gè)大類(lèi)對(duì)應(yīng)的小類(lèi)。比如訪(fǎng)問(wèn)來(lái)源為搜索引擎的分類(lèi)下，有百度、谷歌360等幾大搜索引擎，從圖表上就能直觀(guān)體現(xiàn)各分類(lèi)所占比例大小，當(dāng)然鼠標(biāo)滑上圖表上時(shí)會(huì)顯示分類(lèi)所占的比例數(shù)字。
餅圖更適合表現(xiàn)數(shù)據(jù)相對(duì)于總數(shù)的百分比等關(guān)系， 每個(gè)的弧度表示數(shù)據(jù)數(shù)量的比例。如果只是表示不同類(lèi)目數(shù)據(jù)間的大小，建議使用 柱狀圖，人們對(duì)于微小的弧度差別相比于微小的長(zhǎng)度差別更不敏感，或者也可以通過(guò)配置餅狀圖參數(shù)roseType 顯示成南丁格爾圖，通過(guò)半徑大小區(qū)分?jǐn)?shù)據(jù)的大小。
上述內(nèi)容就是怎么使用ECharts制作餅狀圖，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
