如何给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柱状图每个柱子颜色不一样的方法，包括数组随机生成颜色、根据数据值不同设置不同颜色、传入自定义颜色数组和传入函数动态生成颜色。根据具体场景选择合适的方法，能够让图表更加生动有趣。