1. 程式人生 > >echarts,type:bar 柱形圖的行高和寬度(條間距離)設定

echarts,type:bar 柱形圖的行高和寬度(條間距離)設定

type:bar 柱形圖的行高和寬度(條間距離)設定

百度圖表柱形圖的bar之間的行高?好像在文件沒找到對應屬性,只有barGap和barCategoryGap,但單獨設定這兩個一般還達不到我們想要的“條間距”顯示效果,可以試試以下設定:

關鍵程式碼:

...
yAxis:{
type:'category',
data:['週一','週二','週三','週四','週五'],
max:20 //關鍵第一句
}
...

series:[
...

最後一個bar設定

{
...

barCateGoryGap:20, //關鍵第二句:值或為百分比 ‘60%’ ,如果同一類目下的柱間距:barGap:20
}

百度圖例:

設定後:

或者:

series[i]-bar.barGap string

[ default: 30% ]

柱間距離,可設固定值(如 20)或者百分比(如 '30%',表示柱子寬度的 30%)。

如果想要兩個系列的柱子重疊,可以設定 barGap 為 '-100%'。這在用柱子做背景的時候有用。

在同一座標系上,此屬性會被多個 'bar' 系列共享。此屬性應設置於此座標系中最後一個 'bar' 系列上才會生效,並且是對此座標系中所有 'bar' 系列生效。

series[i]-bar.barCategoryGap string

[ default: '20%' ]

類目間柱形距離,預設為類目間距的20%,可設固定值

在同一座標系上,此屬性會被多個 'bar' 系列共享。此屬性應設置於此座標系中最後一個 'bar' 系列上才會生效,並且是對此座標系中所有 'bar' 系列生效

總結:我這是柱形在Y軸的柱狀圖間距,如果在X軸上,將max值設定在 xAxis 中試試~~