餅圖是一種常用的數據可視化方式,可以直觀地展示不同數據佔比情況。在某些情況下,我們需要更加詳細地展示其中一部分數據的結構,這時就可以使用餅圖的一部分再做一個餅圖。
一、選擇餅圖的一部分
首先需要選擇需要更加詳細展示的數據部分。可以根據具體的需求,選擇佔比較大,或者佔比較小但是比較複雜的部分。
例如下面這個數據集展示了某個國家的人均消費情況:
var data = [
{name: '食品煙酒', value: 20},
{name: '衣著', value: 10},
{name: '居住', value: 30},
{name: '交通通信', value: 15},
{name: '教育文化娛樂', value: 10},
{name: '醫療保健', value: 15}
];
我們可以選擇其中的「居住」這一部分作為需要詳細展示的部分。
二、使用echarts進行餅圖的繪製
接下來,我們可以使用echarts庫進行餅圖的繪製。首先需要引入echarts庫:
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
然後,我們可以通過如下代碼繪製最開始的餅狀圖:
var myChart = echarts.init(document.getElementById('main'));
var option = {
series: [{
name: '消費佔比',
type: 'pie',
radius: '60%',
data: data
}]
};
myChart.setOption(option);
結果如下所示:
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/286258.html
微信掃一掃
支付寶掃一掃