echarts 柱状图条形图如何设置

在echarts中，可以通过设置`barWidth`、`barMaxWidth`和`barMinWidth`来调整柱状图和条形图的宽度。其中，`barWidth`用于设置柱条的宽度，可以设置为具体的像素值（例如：20表示20px）或者百分比（表示占据类目宽度的比例）。`barMaxWidth`和`barMinWidth`分别用于设置最大和最小柱条宽度。请注意，在有多个柱条时，`barWidth`只需要在最后一个柱条里面设置，而`barMaxWidth`和`barMinWidth`需要在每一个柱条里面都分别设置才会生效。例如：

series: [
{
name: '1',
data: [100, 150, 230, 224, 218],
type: 'bar',
barMaxWidth: 20, // 每一个都要设置
barMinWidth: 5, // 每一个都要设置
itemStyle: {
color: 'rgba(100, 219, 155, 0.12)',
borderWidth: 1,
borderColor: "#64DB9B",
},
},
{
name: '2',
data: [100, 150, 230, 224, 218],
type: 'bar',
barWidth: '15%', // 仅在最后一个里面设置
barMaxWidth: 20, // 每一个都要设置
barMinWidth: 5, // 每一个都要设置
itemStyle: {
color: '#64DB9B',
borderWidth: 1,
borderColor: "#64DB9B",
},
}
]

在上述代码中，第一个柱条使用了`barMaxWidth`和`barMinWidth`来设置最大和最小柱条宽度，而第二个柱条则使用了`barWidth`来设置宽度占据类目宽度的百分比，并且也同时设置了`barMaxWidth`和`barMinWidth`。这样，你可以根据需求来灵活调整柱状图和条形图的宽度。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [百度echarts 柱状图 顶部拼接圆点效果](https://blog.csdn.net/WangYanWenXin/article/details/130280245)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Echarts柱状图宽度/边框设置问题](https://blog.csdn.net/qq_37604640/article/details/120130583)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]