echarts 柱狀圖顏色設置

如果給柱狀圖設置顏色，我們執行在 option 中 傳入 color 字段的一個數組。代碼如下：

option = {
    color: ['#2EB7BD', '#3CE1D9', '#FBBACB', '#4695D1'],
    ...
}

上面是根據柱狀圖 legend 中 data 進行顏色區分。如果我們只有一個類別，分別給 xAxis 上的柱狀圖進行顏色區分，代碼如下：

option = {
    ...
    series: [{
        data: [],
        type: 'bar',
        itemStyle: {
            normal: {
                color: function(params) {
                    //注意，如果顏色太少的話，後面顏色不會自動循環，最好多定義幾個顏色
                    var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
	            if (params.dataIndex >= colorList.length) {  //給大於顏色數量的柱體添加循環顏色的判斷
                        index = params.dataIndex - colorList.length;
                    } 
                    return colorList[params.dataIndex]
                }
            }
        }
    }]
}

那麼如何給柱狀圖添加漸變色呢？

0，0，1，0分別代表了右、下、左、上四個位置的顏色座標，然後再在下方的數組中：
{offset: 0, color: '#3977E6'},代表顏色座標爲0的顏色
{offset: 0.5, color: '#3A8EE6'},代表顏色座標爲0.5的顏色
{offset: 0.8, color: '#FAB6B6'},代表顏色座標爲0.8的顏色
{offset: 1, color: '#37BBF8'}代表顏色座標爲1處的顏色
 

option = {
    ...    
    series: [
        {
            name: '數量',
            type: 'bar',
            data: [],
            itemStyle: {
                normal: {
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            {offset: 0, color: '#3977E6'},
                            {offset: 1, color: '#37BBF8'}
                        ]
                    )
                }
            }
        }
    ]
};

折線區域顏色漸變：

option = {
    areaStyle:{
        normal:{
            //顏色漸變函數 前四個參數分別表示四個位置依次爲左、下、右、上
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                offset: 0,
                color: 'rgba(80,141,255,0.39)'
            }, {
                offset: .34,
                color: 'rgba(56,155,255,0.25)'
            },{
                offset: 1,
                color: 'rgba(38,197,254,0.00)'
            }])
        }
    },
}

參考案例：echarts 柱狀圖漸變色背景