echart 柱状图图例放在最下面居中
时间: 2025-05-28 20:12:40 浏览: 26
### ECharts 柱状图图例底部居中配置
在 ECharts 中,可以通过 `legend` 的属性来调整图例的位置和对齐方式。为了实现将柱状图的图例放置在图表最下方并居中对齐的效果,可以设置 `legend` 的 `bottom` 和 `align` 属性[^1]。
以下是完整的代码示例:
```javascript
var myChart = echarts.init(document.getElementById('echartsDiv'));
var option = {
title: {
text: 'ECharts 图例底部居中示例'
},
tooltip: {},
legend: { // 设置图例位置和对齐方式
orient: 'horizontal', // 图例排列方向为水平
bottom: '10%', // 距离容器底部的距离为 10%
align: 'auto', // 自动对齐到中间
left: 'center' // 将图例水平居中对齐
},
xAxis: {
data: ['一月', '三月', '五月', '七月', '九月', '十一月']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [20, 27, 39, 13, 17, 30],
itemStyle: {
normal: {
color: function (params) {
let colorList = ["#7F7F7F", "#FFC000", "#558ED5"];
return colorList[params.dataIndex % colorList.length];
}
}
}
}]
};
myChart.setOption(option);
```
#### 关键参数说明
- **`orient`**: 控制图例的方向,默认值为 `'horizontal'` 表示横向布局,也可以设置为 `'vertical'` 实现纵向布局[^1]。
- **`bottom`**: 定义图例距离容器底部的距离,单位支持像素 (`px`) 或百分比 (`%`)。这里设置为 `'10%'` 是为了让图例位于底部上方一定空间。
- **`left`**: 使用 `'center'` 可以让图例相对于整个容器水平居中显示。
- **`align`**: 当图例较多时,自动调整其内部间距和分布,通常默认即可满足需求。
通过以上配置,能够轻松实现图例置于图表底部中央的目标。
---
阅读全文
相关推荐
















