Echarts顏色設置技巧讓你的圖表更加生動鮮明

一、利用調色板實現自定義顏色

Echarts 提供了一些預設的調色板，如果這些顏色不能滿足你的需求，你可以使用 echarts.init(opts: Object, [theme: Object|string], [opts2: Object]) 初始化圖表時，指定顏色數組或顏色函數。其中顏色函數有兩個參數，第一個參數是系列號，第二個參數是數據編號。

var chart = echarts.init(document.getElementById('main'),'light');
var option = {
    color: ['#37a2da', '#67e0e3', '#9fe6b8','#ffdb5c', '#ff9f7f', '#e062ae', '#e690d1', '#e7bcf3','#9d96f5','#8378EA'],
    series: {
        ...
    }
};

除此之外，你還可以通過 define 定義自己的顏色系列。

echarts.util.define(
    "myTheme",
    {
        color: [
            "#c23531",
            "#2f4554",
            "#61a0a8",
            "#d48265",
            "#91c7ae",
            "#749f83",
            "#ca8622",
            "#bda29a",
            "#6e7074",
            "#546570",
            "#c4ccd3"
        ]
    }
);

二、通過漸變色讓圖表更加引人入勝

你還可以通過 echarts graphic 組件中的 rect 和 linearGradient，利用漸變實現更加豐富的圖表顏色表現。

var chart = echarts.init(document.getElementById('main'),'light');
var option = {
    graphic: [{
        type: 'rect',
        left: 'center',
        top: 'middle',
        z: 100,
        shape: {
            width: 400,
            height: 50,
            r: 20
        },
        style: {
            fill: {
                type: 'linear',
                colorStops: [{
                    offset: 0,
                    color: '#0f0'
                }, {
                    offset: 1,
                    color: '#f00'
                }]
            }
        }
    }],
    series: {
        ...
    }
};

三、利用主題色系讓圖表風格統一

Echarts 主題默認提供了 7 種系列配色主題。

var chart = echarts.init(document.getElementById('main'),'dark');

對於喜歡自定義主題的用戶，Echarts 提供了 createTheme 函數，用戶只需要提供主題的顏色數組就可以自動生成主題。

echarts.registerTheme('myTheme', {
    color: ['#9bd7ff', '#ffc448', '#ff8080', '#009cff', '#7ecef4', '#5ac8ed', '#d66bc2', '#5c71c8', '#3ed7f1', '#ffc172']
});

var chart = echarts.init(document.getElementById('main'),'myTheme');

四、動態改變圖表顏色

有時候需要通過用戶交互動態改變圖表的顏色，Echarts 提供了 setOption 函數。你只需要修改 option.color 數組的值或者通過 option.series.itemStyle.normal.color<-Function 來更新顏色函數，然後調用 setOption 函數就可以輕鬆更新圖表顏色。

var chart = echarts.init(document.getElementById('main'),'light');
var option = {
    color: ['#37a2da', '#67e0e3', '#9fe6b8','#ffdb5c', '#ff9f7f', '#e062ae', '#e690d1', '#e7bcf3','#9d96f5','#8378EA'],
    series: {
        ...
    }
};
chart.setOption(option);

// 修改顏色
option.color = ['#ff7875', '#ff9c6e', '#ffc069','#ffd666', '#b37feb', '#727bec', '#3eaf7c', '#4a657a','#223273','#6f6f6f'];
chart.setOption(option);

五、結合圖表類型選擇合適的顏色表現

圖表類型不同，所要表達的信息也不同，因此在選擇顏色的時候也要根據不同的圖表類型搭配合適的顏色方案。例如餅圖通常需要使用漸變色、飽和度高的顏色，使得整個圖表更加美觀。而折線圖可以利用深淺不一的顏色來突出關鍵點。

var chart = echarts.init(document.getElementById('main'),'light');
var option = {
    color: ['#37a2da', '#67e0e3', '#9fe6b8','#ffdb5c', '#ff9f7f', '#e062ae', '#e690d1', '#e7bcf3','#9d96f5','#8378EA'],
    series: [
        {
            name: '訪問來源',
            type: 'pie',
            radius: '55%',
            roseType: 'angle',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 1,
                        colorStops: [
                            {
                                offset: 0, color: '#7ecef4' // 0% 處的顏色
                            },
                            {
                                offset: 1, color: '#3eaf7c' // 100% 處的顏色
                            }
                        ],
                    },
                }
            },
            data: [...]
        },
        {
            name:'郵件營銷',
            type:'line',
            data:[120, 132, 101, 134, 90, 230, 210],
            itemStyle: {
                color: '#009cff'
            },
            lineStyle: {
                color: '#2f4554'
            }
        }
    ]
};
chart.setOption(option);