echarts 柱状图渐变色背景

如何制作柱状图渐变色背景，我们可以先参考 echarts 柱状图颜色设置。接下来我们来实战一下，看看这次的效果图吧。

首先我们可以看到，X 轴表示数据，Y轴表示类别。柱状图上有该地区的数量，同时柱状图颜色从左到右是渐变色，在渐变色的尽头我们可以看到给柱状图添加的圆角。

一、设置 XY 坐标轴

xAxis: {
    type: 'value',
    show: false
},
yAxis: {
    type: 'category',
    axisLabel: {
        show: true,
        textStyle: {
            color: '#fff'
        }
    },
    axisTick: {
        show: false
    },
    axisLine: {
        show: false
    },
    data: ['西北区', '西南区', '东北区', '华北区', '华东区', '华中区', '华南区']
},

二、设置标签内容以及位置

series: [
    {
        name: '数量',
        type: 'bar',
        label: {
            normal: {
                show: true,
                formatter:function(params){ //标签内容
                    return  params.value
                },
                position: 'inside',
                fontSize: 10,
                color:'#000'
            }
        }
    }    
]

三、柱状图颜色渐变

series: [
    {
        name: '数量',
        type: 'bar',
        itemStyle: {
            normal: {
                //颜色设置
                color: function(params) {
                    // 渐变色 设置
                    var color1=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#e30430" // 0% 处的颜色
                    },{
                        offset: 1,
                        color: "#f6c6a2" // 100% 处的颜色
                    }], false)
                    var color2=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#d16922" // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: "#fcc09c" // 100% 处的颜色
                    }], false)
                    var color3=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#77bc00" // 0% 处的颜色
                    },{
                        offset: 1,
                        color: "#dbc782" // 100% 处的颜色
                    }], false)
                    var color4=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#1dc4bc" // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: "#f5f7f2" // 100% 处的颜色
                    }], false)
                    var color5=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#1210cd" // 0% 处的颜色
                    },{
                        offset: 1,
                        color: "#e1ebf5" // 100% 处的颜色
                    }], false)
                    var color6=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#ffd835" // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: "#fcf6da" // 100% 处的颜色
                    }], false)
                    var color7=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#772ace" // 0% 处的颜色
                    },{
                        offset: 1,
                        color: "#dec7fc" // 100% 处的颜色
                    }], false)

                    var colorList = [
                        color7,color6,color5,color4,color3,color2,color1
                    ];
                    return colorList[params.dataIndex]
                },
            }
        },
    }    
]

四、设置柱状图圆角

series: [
    {
        name: '数量',
        type: 'bar',
        itemStyle: {
            normal: {
                barBorderRadius:[0, 30, 30, 0]
            }
        },
    }    
]