Echarts 背景渐变柱状图

 

var dom = document.getElementById("container");
var myChart1 = echarts.init(dom);
var app = {};
option1 = null;
 //初始化数据
    var category = ['深圳市', '东莞市', '广州市', '惠州市', '北京市', '上海市', '武汉市'];
    var barData = [7913, 4910, 3810, 2054, 988, 3979, 818];

    var option1 = {
        title: {
            text: '柱状图示例',
                textStyle: {
                    color: '#03a9f4'
                }
        },
                legend: {
                    data:['用户数']
                },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '16%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#ff0"
                }
            },
            axisLabel: {
                rotate:45,      //倾斜度 -90 至 90 默认为0
                show: false
            },
            axisTick: {
                show: false
            },
             splitLine: {           // 分隔线
                show: false,        // 默认显示，属性show控制显示与否
            },
        },


        yAxis: {
            type: 'category',
            data: category,

            splitLine: {           // 分隔线
                show: false,        // 默认显示，属性show控制显示与否
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#ff0"
                }
            },
            axisTick: {
                show: false
            },
            offset: 10,
        },
        series: [
            {
                name: '数量',
                type: 'bar',
                data: barData,
                barWidth: 14,
                // barGap: 10,
                // smooth: true,
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        offset: [5, -2],
                        textStyle: {
                            color: '#F68300',
                            fontSize: 13
                        }
                    }
                },
                itemStyle: {
                    emphasis: {
                        barBorderRadius: 7
                    },
                    normal: {
                        barBorderRadius: 7,
                        color: function(params){
                            var colorList = [
                                ['#3977E6','#37BBF8'],
                                ['#E8576C','#661C5A']
                            ]
                            for(let i=0;i<barData.length;i++){
                                if(barData[params.dataIndex] <= 3000){
                                    return new echarts.graphic.LinearGradient(
                                        0, 0, 1, 0,
                                        [
                                            {offset: 0, color: '#3977E6'},
                                            {offset: 1, color: '#37BBF8'}
                                        ])
                                }else{
                                    return new echarts.graphic.LinearGradient(
                                        0, 0, 1, 0,
                                        [
                                            {offset: 0, color: '#E8576C'},
                                            {offset: 1, color: '#661C5A'}

                                        ])
                                }
                            }
                        }
                    },
                },
            },

        ]
    };

if (option1 && typeof option1 === "object") {
    myChart1.setOption(option1, true);
}