echats條形圖中y軸類型爲類目時,y軸線的配置

在這裏插入圖片描述
如上圖所示的條形圖,配置y軸方向的grid分割線的時候,耗費了很多時間,結果,被一句show:true打敗了~~~~
在這裏插入圖片描述
官方文檔如圖:
在這裏插入圖片描述
此例option代碼:

option = {
    grid: {
        left: 0,   //距離外層box的上下左右邊距
        right: '4%',
        top: '6%',
        containLabel: true
    },
    legend:{
        show:false   //圖例是否顯示
    },
    xAxis : [
        {
            type : 'value',   //x軸的類型爲值,value來自series中的data
            position:'top',     //x軸線的位置
            axisLine:{
                show:false,   //x軸線是否顯示
                lineStyle:{
                    color:'#7b8ba5'   //x軸線顏色和字體顏色
                }
            },
            axisTick:{
                show:false
            },
            splitLine:{
                show:false    //x軸方向的網格上的分割線
            }
        }
    ],
    yAxis : [
        {
            type : 'category',   //y軸的類型爲類目
            axisLine:{
                show:false,     //x軸線是否顯示
                lineStyle:{
                    color:'#7b8ba5'
                }
            },
            splitLine:{
                show:true,     //x軸方向的網格上的分割線,默認爲true;類型爲類目時,此句不能省略
                lineStyle:{
                    color:'#edf2f9'
                }
            },
            axisTick : {show: false},
            data : ['週一','週二','週三','週四','週五','週六','週日','週五','週六','週日']
        }
    ],
    series : [
        {
            name:'利潤',
            type:'bar',
            barWidth:14,
            barCategoryGap:15,
            itemStyle:{
                color:'#52cdd5'
            },
            label: {
                normal: {
                    show: true,
                    position: 'inside'
                }
            },
            data:[200, 170, 240, 244, 200, 220, 210, 200, 220, 210]
        }
    ]
};
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章