餅圖是一種常用的數據可視化方式,可以直觀地展示不同數據佔比情況。在某些情況下,我們需要更加詳細地展示其中一部分數據的結構,這時就可以使用餅圖的一部分再做一個餅圖。
一、選擇餅圖的一部分
首先需要選擇需要更加詳細展示的數據部分。可以根據具體的需求,選擇佔比較大,或者佔比較小但是比較複雜的部分。
例如下面這個數據集展示了某個國家的人均消費情況:
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