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