餅圖的一部分又做一個餅圖

餅圖是一種常用的數據可視化方式,可以直觀地展示不同數據佔比情況。在某些情況下,我們需要更加詳細地展示其中一部分數據的結構,這時就可以使用餅圖的一部分再做一個餅圖。

一、選擇餅圖的一部分

首先需要選擇需要更加詳細展示的數據部分。可以根據具體的需求,選擇佔比較大,或者佔比較小但是比較複雜的部分。

例如下面這個數據集展示了某個國家的人均消費情況:

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

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-22 16:07
下一篇 2024-12-22 16:07

相關推薦

發表回復

登錄後才能評論