饼图legend 图标宽高喝间距
时间: 2025-02-12 16:09:49 浏览: 33
### 设置 ECharts 饼图 Legend 图标宽度、高度和间距
对于调整饼图中的图例(`legend`),可以通过修改 `itemWidth`, `itemHeight` 和 `itemGap` 属性来控制图标的具体样式。这些属性分别用于定义图例项的宽度、高度以及相邻两项间的间隔。
以下是具体的实现方法:
```javascript
var option = {
legend: {
orient: 'vertical',
left: 'left',
itemWidth: 20, // 自定义图例标记图形宽度
itemHeight: 15, // 自定义图例标记图形高度
itemGap: 30, // 修改图例间距离
data: [
{name: '分类一'},
{name: '分类二'}
]
},
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
].sort(function (a, b) { return a.value - b.value; }),// 对数据进行排序处理
roseType: 'angle'
}]
};
```
此代码片段展示了如何通过设置 `itemWidth`, `itemHeight` 及 `itemGap` 来改变图例中各个项目的外观尺寸与布局方式[^1]。
此外,如果希望进一步自定义图例内的文本显示效果,则可以利用 `textStyle` 字段下的参数来进行字体大小(`fontSize`)、颜色(`color`)等方面的设定;而当涉及到更复杂的格式化需求时,可借助于 `rich` 文本特性配合 `formatter` 函数达成目的[^3]。
阅读全文
相关推荐















