echarts 多柱状图 不同背景色设置（2021-01-05）

先看图是否满足你的需求

提示：单个柱子的背景色设置这就不说了，百度一下就可以，这里的这种方式可能也不太合适单个柱子

上面的这种目前是满足我的开发需求的，为了达到这个需求我也是找了各种搞法（废话不多说，直接上方法），

    xAxis:  
        {
            type: 'category',
            data: ['10月','11月', '12月', '1月'],
            boundaryGap: true,
            splitArea: {
                show: true,
                interval:0,
                areaStyle: {
                    color: ['red', '#000','gray','green'] //这里重点，用于设置颜色的数组，
                    //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
                }
            }
    },

以下是这个属性的官方文档地址：https://echarts.apache.org/next/zh/option.html#xAxis.splitArea

以下是上图完整的代码演示(可以去echarts图例跑一跑)：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};
option = {
    color: ['#007BFF', '#4cabce', '#006699', '#F0AD4E80'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        left: '1%',
        right: '65%',
        bottom: '66%',
        containLabel: true
    },
    legend: {
        data: ['前年', '去年', '今年', '平均'],
        left: '7%',
        top: '4%',
    },
    xAxis:  
        {
            type: 'category',
            data: ['10月','11月', '12月', '1月'],
            boundaryGap: true,
            splitArea: {
                show: true,
                interval:0,
                areaStyle: {
                    color: ['red', '#000','gray','green']
                }
            }
    },
    yAxis: [
        {
            type: 'value',
            min: 0,
            max: 250,
            interval: 50
        }
    ],
    series: [
        {
            name: '前年',
            type: 'bar',
            barGap: 0,
            data: [230, 180, 80,130],
             
        },
        {
            name: '去年',
            type: 'bar',
            data: [220, 154, 90,150]
        },
        {
            name: '今年',
            type: 'bar',
            data: [220, 130, 90,180]
        },
        {
            name: '平均',
            type: 'line',
            step: 'middle',
            data: [223, 155, 87,153]
        },
    ]
};

以上就是 多柱状图，不同颜色背景的设置实现，希望对你有所帮助（如果有帮助，希望能点个赞支持一下）~！