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();

效果圖：