一、如何設置echarts柱狀圖的寬度
在echarts中，可以通過設置series中的itemStyle.normal.barWidth屬性來調整柱狀圖的寬度。該屬性的值可以是一個數值，也可以是一個百分數。如果設置為某個數值，則所有柱子的寬度都將被設置為該值；如果設置為一個百分數，則柱子的寬度將按照屏幕寬度進行縮放。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
normal: {
barWidth: 30 // 設置柱子寬度為30
}
}
}]
};
二、如何設置echarts柱狀圖的邊框
設置柱狀圖的邊框可以在itemStyle.normal中設置borderColor和borderWidth屬性，分別代表邊框顏色和邊框寬度。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
normal: {
borderColor: 'red', // 設置邊框顏色為紅色
borderWidth: 2 // 設置邊框寬度為2
}
}
}]
};
三、如何讓echarts柱狀圖傾斜
可以通過設置label.normal.rotate屬性，將柱狀圖傾斜。該屬性的值為一個角度值，如果值為正數則代表逆時針旋轉，否則代表順時針旋轉。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
label: {
normal: {
rotate: -30 // 將標籤旋轉30度
}
}
}]
};
四、如何調整echarts柱狀圖的寬度和間距
可以通過系列間距和柱間距來控制柱狀圖的寬度和間距。系列間距可以在grid中設置，柱間距可以在xAxis中設置。它們的值都是一個百分數。
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
interval: 0, // 強制顯示所有標籤
rotate: -30 // 將標籤旋轉30度
},
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#999999'
}
},
boundaryGap: true, // 首尾柱子是否留白
barGap: '30%', // 設置柱間距為系列寬度的30%
barCategoryGap: '20%' // 設置系列間距為柱的20%
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#999999'
}
},
splitLine: {
lineStyle: {
color: '#D9D9D9'
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '50%', // 設置柱寬為系列寬度的50%
itemStyle: {
normal: {
color: '#54C0B0'
}
}
}]
};
五、如何更好的呈現echarts柱狀圖的數據格式
可以通過給柱狀圖添加標籤，來更好地呈現數據格式。既可以在xAxis中設置axisLabel.show屬性為false，然後在series中設置label.normal.show屬性為true，也可以在xAxis中設置axisLabel.show屬性為true，然後在series中設置label.normal.position屬性來控制標籤的位置。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
show: false // 不顯示標籤
},
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#999999'
}
},
boundaryGap: true, // 首尾柱子是否留白
barGap: '30%', // 設置柱間距為系列寬度的30%
barCategoryGap: '20%' // 設置系列間距為柱的20%
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#999999'
}
},
splitLine: {
lineStyle: {
color: '#D9D9D9'
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '50%', // 設置柱寬為系列寬度的50%
itemStyle: {
normal: {
color: '#54C0B0'
},
emphasis: {
color: '#76D7C4'
} // 鼠標懸停時的顏色
},
label: {
normal: {
show: true, // 顯示標籤
position: 'top' // 標籤位置設置為頂部
}
}
}]
};
六、如何設置echarts橫向柱狀圖的間距
橫向柱狀圖的間距設置和豎向柱狀圖類似，不同的只是xAxis和yAxis的設置。其中，xAxis代表y軸，yAxis代表x軸。
option = {
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
interval: 0, // 強制顯示所有標籤
rotate: -30 // 將標籤旋轉30度
},
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#999999'
}
},
boundaryGap: true, // 首尾柱子是否留白
barGap: '30%', // 設置柱間距為系列寬度的30%
barCategoryGap: '20%' // 設置系列間距為柱的20%
},
xAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#999999'
}
},
splitLine: {
lineStyle: {
color: '#D9D9D9'
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '50%', // 設置柱寬為系列寬度的50%
itemStyle: {
normal: {
color: '#54C0B0'
},
emphasis: {
color: '#76D7C4'
} // 鼠標懸停時的顏色
},
label: {
normal: {
show: true, // 顯示標籤
position: 'right' // 標籤位置設置為右側
}
}
}]
};
七、如何選取echarts柱狀圖數據過多的情況下的數據
在數據過多的情況下，可以通過xAxis中的axisLabel.interval屬性來設置顯示步長。如果數據比較密集，可以適當調小步長，如果數據比較稀疏，可以適當調大步長。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
interval: 0, // 強制顯示所有標籤
rotate: -30 // 將標籤旋轉30度
},
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#999999'
}
},
boundaryGap: true, // 首尾柱子是否留白
barGap: '30%', // 設置柱間距為系列寬度的30%
barCategoryGap: '20%' // 設置系列間距為柱的20%
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#999999'
}
},
splitLine: {
lineStyle: {
color: '#D9D9D9'
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '50%', // 設置柱寬為系列寬度的50%
itemStyle: {
normal: {
color: '#54C0B0'
},
emphasis: {
color: '#76D7C4'
} // 鼠標懸停時的顏色
},
label: {
normal: {
show: true, // 顯示標籤
position: 'top' // 標籤位置設置為頂部
}
}
}]
};
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/188738.html
微信掃一掃 
支付寶掃一掃 