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]
        }
    ]
};
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章