echarts自定义legend的间距
时间: 2025-04-05 22:17:33 浏览: 53
### ECharts 中自定义 Legend 的间距设置
在 ECharts 中,可以通过 `itemGap` 属性来调整图例项之间的间距。该属性用于控制图例标记与其右侧文本之间以及不同图例项之间的水平距离[^1]。
以下是具体的配置方式:
#### 配置参数说明
- **icon**: 图例标记的形状,默认为 `'circle'`,可以更改为其他图形如 `'rect'` 或者自定义路径。
- **itemHeight**: 图例标记的高度。
- **itemWidth**: 图例标记的宽度。
- **itemGap**: 控制图例项之间的间隔大小,单位为像素。
#### 示例代码
下面是一个完整的示例,展示如何通过 `itemGap` 来设置图例间的间距:
```javascript
option = {
legend: {
icon: 'rect',
itemHeight: 4,
itemWidth: 18,
itemGap: 15, // 设置图例项之间的间距
data: ['系列一', '系列二']
},
series: [{
name: '系列一',
type: 'bar',
data: [10, 20, 30]
}, {
name: '系列二',
type: 'line',
data: [30, 20, 10]
}]
};
```
在这个例子中,`itemGap` 被设置为 `15` 像素,表示两个图例项之间的水平间距被设定为此数值。
如果需要进一步定制样式或者动态修改这些值,则可以在初始化图表之后调用 `setOption()` 方法重新渲染图表并更新对应的配置。
---
阅读全文
相关推荐


















