ECharts 中调整柱状图的宽度（即柱子的粗细）或间距
原创
ECharts 中调整柱状图的宽度（即柱子的粗细）或间距
原创
小焱
发布于 2025-07-29 13:54:40
发布于 2025-07-29 13:54:40
代码可运行
运行总次数：0
代码可运行
在 ECharts 中调整柱状图的宽度（即柱子的粗细）或间距，可以通过以下几种方式实现：
1. 使用 barWidth 直接设置柱子宽度
通过 series.barWidth 固定柱子的像素宽度，不受数据量影响：
option = {
series: [{
type: 'bar',
barWidth: 15, // 柱子宽度为 15px
data: [10, 20, 30, 40, 50]
}]
};2. 使用 barMaxWidth 限制最大宽度
当数据量较少时，避免柱子过宽：
option = {
series: [{
type: 'bar',
barMaxWidth: 30, // 柱子最大宽度为 30px
data: [10, 20, 30, 40, 50]
}]
};3. 使用 barCategoryGap 调整类目间距
控制同一类目下不同系列柱子之间的间距（百分比）：
option = {
series: [{
type: 'bar',
barCategoryGap: '50%', // 类目间距为柱子宽度的 50%
data: [10, 20, 30, 40, 50]
}]
};4. 组合使用 barWidth 和 barGap
同时控制柱子宽度和间距：
option = {
series: [{
type: 'bar',
barWidth: '30%', // 柱子宽度为类目宽度的 30%
barGap: '20%', // 不同系列之间的间距为柱子宽度的 20%
data: [10, 20, 30, 40, 50]
}]
};5. 完整示例：调整柱子粗细和间距
option = {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月']
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
barWidth: '20%', // 柱子宽度为类目宽度的 20%（变细）
barCategoryGap: '40%', // 类目间距为柱子宽度的 40%
data: [10, 20, 30, 40, 50]
}]
};6. 响应式调整
结合 mediaQuery 根据容器尺寸动态调整：
option = {
mediaQuery: [
{
// 大屏幕：柱子稍宽
query: { minWidth: 768 },
option: {
series: [{
barWidth: '30%'
}]
}
},
{
// 小屏幕：柱子更细，避免拥挤
option: {
series: [{
barWidth: '15%'
}]
}
}
]
};注意事项
- 百分比 vs 像素：
barWidth可以是像素值（如15）或百分比（如'30%'），百分比相对于类目宽度计算。 - 多系列柱状图：如果有多个系列（如对比不同产品数据），使用
barGap控制系列间间距。 - 数据量影响：数据量越多，柱子会自动变细，可结合
barMaxWidth限制最大宽度。
通过以上配置，你可以灵活调整柱状图的粗细和间距，让图表更加美观和易读。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
