Echarts柱状图的每个柱子显示不同颜色

妖狐艹你老母 2022-04-10 04:41 605阅读 0赞

在使用Echarts制作柱状图的时候，通常在横轴每个标签只有一个柱子的时候，每个柱子的颜色都是一样的，

![20181225092844335.png][]

然而，很多时候我们为了使界面更加美观，通常会有使每个柱子颜色都不相同的需求。那么这时候，我们需要在itemStyle的normal状态下，首先根据柱子的数量设置一个颜色的数组。然后柱子会设定颜色。如果颜色数组少于柱子的数量，则柱子会循环使用设定的颜色。  
代码如下：

box4 = {
    
        grid: {
            left: '3%',
            top:'2%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        //X轴信息
        xAxis : [
                {
                    type : 'category',
                    data : ['王大锤', '王二锤', '马二锤', '大王二锤'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
        //Y轴信息
        yAxis : [
            {
            type : 'value',
    
            }
        ],
        series : [
            {
                name: '数量',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // 给出颜色组
                            var colorList = ['#cca272','#74608f','#d7a02b','#c8ba23',];
                            return colorList[params.dataIndex]
                        },
                    }
                },
                //柱状图宽度
                barWidth: '60%',
                //柱状图数值
                data:[50,71,63,88]
            }
        ]
       
    };

设置后的图样：

![20181225092924773.png][]

源代码图片：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA1NTM4MQ_size_16_color_FFFFFF_t_70][]

[20181225092844335.png]: /images/20220403/e9ff05a20b13492bbadb32d40012298d.png
[20181225092924773.png]: /images/20220403/c6feb14e94ea4261b142a5bb54ee1c82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA1NTM4MQ_size_16_color_FFFFFF_t_70]: /images/20220403/b59039002b2a47b493d5e23848c6093f.png