echart 柱状图 ---- 坐标轴、网格、柱体配置

代码如下：

var maintainTypeChart;
function loadMaintainTypeChart() {
    var option = {
        grid: {
            left: '3%',
            right: '3%',
            bottom: '15%',
            top: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            axisTick: {
                show: false//隐藏x坐标轴刻度
            },
            //x轴字体样式
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#42436A',
                    fontSize:'12',
                },
                rotate:"30" //字体倾斜角度
            },
            //x轴颜色
            axisLine: {
                lineStyle: {
                    color: "#e4e4e4",
                }
            },
            data: ['wifi', '视频', '车辆', '人脸', '小电']
        },
        yAxis: {
            type: 'value',
            minInterval: 1,//只显示整数
            axisLine: {
                show: false//隐藏y坐标轴
            },
            //y轴字体样式
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#9495ab',
                    fontSize:'12'
                }
            },
            //网格样式
            splitLine: {
                show: true,
                lineStyle:{
                    color: '#e4e4e4',
                    width: 1,
                    type: 'solid'
                }
            },
            axisTick: {
                show: false//隐藏y坐标轴刻度
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: "{a} {b} : {c}"
        },
        series: [{
                name: '',
                type: 'bar',
                barWidth : 6,//柱体宽度
                itemStyle: {
                    normal: {
                        //柱体圆角
                        barBorderRadius:[10, 10, 0, 0],
                        //柱体颜色渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#6A88FF'
                        }, {
                            offset: 1,
                            color: '#3787FF'
                        }]),
                    }
                },
                data: [5, 5, 5, 5, 5]
            },
            {
                name: '',
                type: 'bar',
                barWidth : 6,//柱体宽度
                itemStyle: {
                    normal: {
                        //柱体圆角
                        barBorderRadius:[10, 10, 0, 0],
                        //柱体颜色渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#FFCA41'
                        }, {
                            offset: 1,
                            color: '#FBAD54'
                        }]),
                    }
                },
                data: [3, 3, 3, 2, 2]
            }
        ]
    };
    maintainTypeChart = echarts.init(document.getElementById('maintain-type-chart'));
    maintainTypeChart.setOption(option);
}
loadMaintainTypeChart();

效果图：