如上图所示的条形图,配置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]
}
]
};