探究 Echarts 餅圖的顏色色彩設計

Echarts 是一個非常強大的數據可視化庫，其中的餅圖是常用的圖表類型之一。在 Echarts 中，我們可以通過配置選項調整餅圖的樣式，包括調整顏色的設計。本文將從多個方面探究 Echarts 餅圖的顏色設計。

一、顏色的搭配

顏色的搭配對於餅圖來說非常重要，一方面需要考慮顏色的協調性，另一方面需要考慮顏色的對比度。在 Echarts 中，可以使用 color 配置項設置餅圖的顏色數組。

option = {
    title : {
        text: '餅圖標題',
        subtext: '餅圖副標題',
        x:'center'
    },

    color: ['#c23531','#2f4554','#d48265','#61a0a8','#f2c666','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'],

    series : [
        {
            name: '餅圖名稱',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'數據1'},
                {value:310, name:'數據2'},
                {value:234, name:'數據3'},
                {value:135, name:'數據4'},
                {value:1548, name:'數據5'}
            ]
        }
    ]
};

在這個配置選項中，color 是設置餅圖顏色數組，數組中存放的是顏色值，可以是顏色名稱、RGB 值或者十六進位顏色值。Echarts 會根據數據的數量自動選擇對應的顏色進行填充，如果數據的數量超過了顏色數組的長度，則會循環使用數組中的顏色進行填充。

我們在設計顏色搭配時，可以使用一些配色工具，例如 Adobe Color，它提供了一些流行的顏色方案，如單色、補色、類比等，可以根據不同的需求選擇不同的方案進行設計。在選擇顏色方案時，需要注意配色的漸變和變化，在不同的數據展示上可能需要使用不同的方案。

二、顏色的飽和度和亮度調整

除了顏色的搭配，我們還可以通過調整顏色的飽和度和亮度來改變餅圖的色彩。在 Echarts 中，可以使用顏色的漸變和變化進行調整。

option = {
    title : {
        text: '餅圖標題',
        subtext: '餅圖副標題',
        x:'center'
    },

    color: ['#c23531','#2f4554','#d48265','#61a0a8','#f2c666','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'].map(function (item) {
        return {
            value: item,
            itemStyle: {
                // 飽和度設置
                saturation: 0.6,
                // 亮度設置
                lightness: 0.8
            }
        };
    }),

    series : [
        {
            name: '餅圖名稱',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'數據1'},
                {value:310, name:'數據2'},
                {value:234, name:'數據3'},
                {value:135, name:'數據4'},
                {value:1548, name:'數據5'}
            ]
        }
    ]
};

在這個配置選項中，我們對 color 進行了調整，將數組中的每個顏色值都轉化為一個對象，其中包含了 itemStyle 對象，用於設置當前顏色的樣式。在 itemStyle 中，我們可以通過 saturation 屬性設置顏色的飽和度，通過 lightness 屬性設置顏色的亮度。這樣可以讓整個餅圖的顏色更加柔和和清晰。

三、顏色的漸變設計

除了單色和顏色搭配，我們還可以使用漸變色進行設計，這種顏色設計可以增加色彩層次感，比較適用於圖例比較多的餅圖。在 Echarts 中，可以使用漸變色設置餅圖的顏色。

option = {
    title : {
        text: '餅圖標題',
        subtext: '餅圖副標題',
        x:'center'
    },

    series: [
        {
            name:'餅圖名稱',
            type:'pie',
            radius : ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            itemStyle: {
                borderWidth: 5,
                borderColor: '#fff'
            },
            data:[
                {value:335, name:'數據1'},
                {value:310, name:'數據2'},
                {value:234, name:'數據3'},
                {value:135, name:'數據4'},
                {value:1548, name:'數據5'}
            ],
            // 漸變設置
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#c23531'},
                {offset: 0.5, color: '#d48265'},
                {offset: 1, color: '#91c7ae'}
            ])
        }
    ]
};

在這個配置選項中，我們使用了 color 配置項設置餅圖顏色為一個漸變對象。其中 new echarts.graphic.LinearGradient 這個對象表示了一個線性漸變的色帶，具體的參數為起點的 x、y 坐標、終點的 x、y 坐標以及顏色的數組。顏色的數組中可以包含多個對象，每個對象中包含 offset 屬性表示顏色位置，value 表示顏色值。

四、顏色的圖例設置

顏色的圖例設置非常重要，可以幫助用戶更加清晰地理解餅圖中不同部分的含義。在 Echarts 中，可以使用 legend 配置項設置圖例，包括圖例的名稱、位置、顏色等。

option = {
    title : {
        text: '餅圖標題',
        subtext: '餅圖副標題',
        x:'center'
    },

    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['數據1','數據2','數據3','數據4','數據5']
    },

    series : [
        {
            name: '餅圖名稱',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'數據1'},
                {value:310, name:'數據2'},
                {value:234, name:'數據3'},
                {value:135, name:'數據4'},
                {value:1548, name:'數據5'}
            ]
        }
    ]
};

在這個配置選項中，我們使用了 legend 配置項設置圖例。其中 orient 表示圖例的排列方向，left 表示圖例的位置，data 表示圖例中包含的數據名稱。通過合理的圖例設置，可以讓用戶更加方便地從餅圖中獲取信息。

總結

本文從多個方面探究了 Echarts 餅圖的顏色設計。我們可以從顏色的搭配、飽和度和亮度的調整、漸變設計和圖例設置等多個方面增強餅圖的色彩設計，讓餅圖更加清晰、美觀、易於理解。在實際使用中，應該根據具體的需求進行合理的設計。