如何給echarts柱狀圖每個柱顏色不一樣？

有時候，我們需要將echarts柱狀圖的每個柱子著上不同的顏色，以便更好地展示數據。本文將從以下幾個方面進行詳細闡述：

一、通過數組隨機生成柱子顏色

1、我們可以通過數組隨機生成每個柱子的顏色，代碼如下：

option = {
    // 數據
    // ...
    // 柱子顏色
    color: function(params) {
        var colors = ['#5793f3', '#d14a61', '#675bba', '#f0b13c', '#61bb52'];
        return colors[params.dataIndex % colors.length];
    }
}

在這個例子中，我們設置了5種顏色，如果需要增加可以繼續往數組裡添加顏色即可。調用color參數時，通過dataIndex參數來判斷需要用數組中的哪一種顏色。

二、根據數據值不同設置不同顏色

1、通過min和max參數設置數據範圍，然後利用顏色漸變函數linear-gradient生成漸變色，並通過value參數獲取數據值，從而生成相應的顏色。代碼如下：

option = {
    // 數據範圍
    visualMap: {
        min: 0,
        max: 100,
        calculable: true,
        // 漸變色
        color: ['red', 'yellow', 'green'],
        textStyle: {
            color: '#fff'
        }
    },
    // 數據
    // ...
    // 柱子顏色
    itemStyle: {
        normal: {
            color: function(params) {
                var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                ];
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: colorList[colorList.length - 1]
                }, {
                    offset: 1,
                    color: colorList[0]
                }], false);
            }
        }
    }
}

在這個例子中，我們通過設置visualMap參數的min和max參數來設置數據範圍。然後在itemStyle中通過value參數來獲取數據值，並在顏色漸變函數linear-gradient中生成對應的顏色。

三、傳入自定義的顏色數組

1、如果你已經有了一組固定的顏色，也可以直接傳入數組。代碼如下：

option = {
    // 數據
    // ...
    // 柱子顏色
    itemStyle: {
        normal: {
            color: function(params) {
                var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                ];
                return colorList[params.dataIndex % colorList.length];
            }
        }
    }
}

在這個例子中，我們將顏色數組定義在colorList變數里，並通過params獲取每個柱子對應的數組下標，然後從數組中獲取對應顏色。

四、傳入函數動態生成顏色

1、如果你需要根據不同場景動態設置顏色，可以傳入一個函數來根據數據參數來設置柱子顏色，代碼如下：

option = {
    // 數據
    // ...
    // 柱子顏色
    itemStyle: {
        normal: {
            color: function(params) {
                var color1 = '#41ADF4';
                var color2 = '#F54645';
                if (params.value > 0) {
                    return color1;
                } else {
                    return color2;
                }
            }
        }
    }
}

在這個例子中，我們通過傳入一個函數來進行判斷，如果數據值大於0，返回color1顏色，否則返回color2顏色。

五、總結

本文介紹了四種設置echarts柱狀圖每個柱子顏色不一樣的方法，包括數組隨機生成顏色、根據數據值不同設置不同顏色、傳入自定義顏色數組和傳入函數動態生成顏色。根據具體場景選擇合適的方法，能夠讓圖表更加生動有趣。