echarts饼图修改legend文字间隔
时间: 2025-05-08 14:21:55 浏览: 15
### 调整 ECharts 饼图中 legend 文字之间的间隔
在 ECharts 中,可以通过配置 `legend` 的参数来调整图例的文字间距。具体来说,可以使用 `itemGap` 属性设置图例标记与文字之间的水平间距[^1]。如果需要进一步控制图例项之间的垂直间距,则可以利用 `lineHeight` 或者通过自定义样式实现更精细的布局。
以下是具体的代码示例:
```javascript
var chartPieState = echarts.init(document.getElementById('chartPieState'));
option = {
legend: {
orient: 'vertical', // 图例的方向,默认为横向,可选'vertical'
top: 'center',
left: 'right',
itemGap: 10, // 设置图例每项之间的水平间距
formatter: function (name) {
return name; // 自定义图例文字显示逻辑
},
textStyle: {
rich: {},
fontSize: 12,
padding: [5, 10], // 可以增加额外的空间感
}
},
series: [{
name: '',
type: 'pie',
radius: ['60%', '80%'], // 空心饼图内外径
center: ['50%', '60%'], // 饼图左右上下位置靠这里
data: [
{ value: 40, name: 'A' },
{ value: 60, name: 'B' },
{ value: 70, name: 'C' },
{ value: 90, name: 'D' }
]
}]
};
chartPieState.setOption(option);
```
上述代码中的关键部分在于 `legend.itemGap` 和 `textStyle.padding` 参数。前者用于设定相邻两项间的水平间距,后者则允许开发者为每一项添加额外的填充区域,从而间接影响整体排列密度[^2]。
#### 注意事项
- 如果希望完全定制化图例的表现形式,还可以考虑结合 HTML 渲染器或者 SVG 来手动绘制图例外观。
- 对于复杂的交互需求,建议查阅官方文档了解高级功能支持情况。
阅读全文
相关推荐


















