echarts 中 legend换行对齐
时间: 2023-10-19 16:13:16 浏览: 291
在echarts中图例legend和坐标系grid实现左右布局实例
在 ECharts 中,要实现 legend 换行对齐,可以通过设置 `legend.itemWidth` 和 `legend.itemHeight` 来控制每个 legend 图标的宽度和高度,从而让 legend 自动换行对齐。
例如,假设你的 legend 每行最多只能显示 3 个图标,可以按照以下步骤进行设置:
1. 设置 legend 的布局方向为水平布局:
```javascript
legend: {
orient: 'horizontal'
}
```
2. 设置每个图标的宽度和高度为固定值,以控制每行显示的图标数量:
```javascript
legend: {
itemWidth: 50, // 设置每个图标的宽度
itemHeight: 20 // 设置每个图标的高度
}
```
根据实际情况调整 `itemWidth` 和 `itemHeight` 的数值,使得每行显示的图标数量符合你的需求。
这样设置后,当 legend 中的图标数量超过每行最大显示数时,会自动换行对齐。
阅读全文