使用Echarts創建令人驚嘆的環形圖

一、選取合適的數據

環形圖適合用來展示不同數據之間的佔比關係，因此選取的數據應當符合這個特點。比如，我們可以用環形圖展示某個公司不同部門的利潤佔比，或者某款產品不同銷售地區的市場份額。

舉個例子，我們現在有一個小型的外賣平台，想要用環形圖展示不同餐飲品類的銷售量佔比。我們先根據銷售數據計算出每個品類的銷售量，並把這些數據匯總成一個對象數組：

var data = [
    {value: 300, name: '中式'},
    {value: 200, name: '西式'},
    {value: 150, name: '日式'},
    {value: 100, name: '韓式'},
    {value: 50, name: '其他'}
];

這個數組中，每個對象都包含兩個屬性：value表示銷售量，name表示品類名稱。

二、設置圖表屬性

在使用Echarts繪製環形圖之前，我們需要設置一些基礎屬性。例如，我們可以設置圖表的標題和數據源：

var option = {
    title: {
        text: '餐飲品類銷售量佔比',
        subtext: '2021年1月-6月'
    },
    series: [{
        name: '銷售量',
        type: 'pie',
        data: data
    }]
};

上述代碼中，我們通過title屬性設置了圖表的標題和副標題，通過series屬性設置了數據和圖表類型。這裡我們選擇使用pie類型繪製環形圖。

三、設置環形圖樣式

除了基礎屬性之外，我們還可以通過style屬性設置圖表的樣式。在環形圖中，我們可以調整環的內外半徑、中心位置、顏色等屬性來實現不同的效果。

例如，我們可以將內半徑設為50%，外半徑設為70%，讓環形圖看起來更加立體：

series: [{
    name: '銷售量',
    type: 'pie',
    radius: ['50%', '70%'],
    center: ['50%', '50%'],
    data: data
}]

我們還可以調整扇形之間的間距和弧度，讓圖表更加美觀。例如，我們可以將間距設為5%，將第一塊扇形的起始角度設為90度：

series: [{
    name: '銷售量',
    type: 'pie',
    radius: ['50%', '70%'],
    center: ['50%', '50%'],
    roseType: 'radius',
    itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
    },
    label: {
        color: '#000'
    },
    data: data.sort(function(a, b) {
        return a.value - b.value;
    }),
    labelLine: {
        smooth: 0.2,
        length: 10,
        length2: 20
    },
    itemStyle: {
        emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }
}]

四、完整示例代碼

以下是一個完整的使用Echarts創建令人驚嘆的環形圖的示例代碼：

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/288513.html