本篇文章為大家展示了怎么使用ECharts制作餅狀圖，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
在工作中如果遇到需要計算總費用或金額的各個部分構成比例的情況，一般都是通過各個部分與總額相除來計算，而且這種比例表示方法很抽象，我們可以使用一種餅形圖表工具，能夠直接以圖形的方式形象直觀的顯示各個組成部分所占比例
結合實例給大家分享站長們常常用到的網站分析工具中的訪問來源功能，我們使用Echarts制作餅狀圖，用于表現不同類目（訪問來源）的數據在總和中的占比。
和前幾篇文章介紹的一樣，首先引入Echarts，然后在需要放置圖表的地方加上p#myChart，同時給它加上寬度和高度屬性。
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('myChart'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>: {c} ({d}%)"
},
legend: {
orient: 'horizontal',
left: 'center',
bottom: 0,
data:['直達','其它外鏈','搜索引擎','直接輸入網址或書簽','cnblogs.com','微博','微信','百度','谷歌','360','必應','其他']
},
series: [
{
name:'訪問來源', //內環
type:'pie',
selectedMode: 'single', //單一選中模式
radius: [0, '30%'], //餅圖的半徑 [內半徑，外半徑]
label: {
normal: {
position: 'inner' //內置文本標簽
}
},
labelLine: {
normal: {
show: false //不需要設置引導線
}
},
data:[
{value:335, name:'直達', selected:true},
{value:679, name:'其它外鏈'},
{value:1548, name:'搜索引擎'}
]
},
{
name:'訪問來源',
type:'pie',
radius: ['40%', '55%'],
data:[
{value:335, name:'直接輸入網址或書簽'},
{value:310, name:'cnblogs.com'},
{value:234, name:'微博'},
{value:135, name:'微信'},
{value:1048, name:'百度'},
{value:251, name:'谷歌'},
{value:147, name:'360'},
{value:42, name:'必應'},
{value:60, name:'其他'}
]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
以上代碼中，繪制了兩個換，內環和外環，內環是大類，本例中有3個大類，外環是3個大類對應的小類。比如訪問來源為搜索引擎的分類下，有百度、谷歌360等幾大搜索引擎，從圖表上就能直觀體現各分類所占比例大小，當然鼠標滑上圖表上時會顯示分類所占的比例數字。
餅圖更適合表現數據相對于總數的百分比等關系， 每個的弧度表示數據數量的比例。如果只是表示不同類目數據間的大小，建議使用 柱狀圖，人們對于微小的弧度差別相比于微小的長度差別更不敏感，或者也可以通過配置餅狀圖參數roseType 顯示成南丁格爾圖，通過半徑大小區分數據的大小。
上述內容就是怎么使用ECharts制作餅狀圖，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
