怎么使用ECharts制作餅狀圖

本篇文章為大家展示了怎么使用ECharts制作餅狀圖，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

在工作中如果遇到需要計(jì)算總費(fèi)用或金額的各個(gè)部分構(gòu)成比例的情況，一般都是通過(guò)各個(gè)部分與總額相除來(lái)計(jì)算，而且這種比例表示方法很抽象，我們可以使用一種餅形圖表工具，能夠直接以圖形的方式形象直觀的顯示各個(gè)組成部分所占比例

結(jié)合實(shí)例給大家分享站長(zhǎng)們常常用到的網(wǎng)站分析工具中的訪問(wèn)來(lái)源功能，我們使用Echarts制作餅狀圖，用于表現(xiàn)不同類(lèi)目（訪問(wèn)來(lái)源）的數(shù)據(jù)在總和中的占比。

HTML

和前幾篇文章介紹的一樣，首先引入Echarts，然后在需要放置圖表的地方加上p#myChart，同時(shí)給它加上寬度和高度屬性。

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 var myChart = echarts.init(document.getElementById('myChart')); option = {    tooltip: {        trigger: 'item',        formatter: "{a} <br/>: {c} (msitlou%)"    },    legend: {        orient: 'horizontal',        left: 'center', bottom: 0,        data:['直達(dá)','其它外鏈','搜索引擎','直接輸入網(wǎng)址或書(shū)簽','cnblogs.com','微博','微信','百度','谷歌','360','必應(yīng)','其他']    },    series: [        {            name:'訪問(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)線                }            },            data:[                {value:335, name:'直達(dá)', selected:true},                {value:679, name:'其它外鏈'},                {value:1548, name:'搜索引擎'}            ]        },        {            name:'訪問(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)。比如訪問(wèn)來(lái)源為搜索引擎的分類(lèi)下，有百度、谷歌360等幾大搜索引擎，從圖表上就能直觀體現(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)注億速云行業(yè)資訊頻道。