<think>嗯，用户让我介绍一下ECharts饼图的自定义标签。首先，我需要回想一下ECharts的基本知识，特别是饼图部分。记得ECharts是一个强大的图表库，自定义标签可以帮助用户更灵活地展示数据。
用户可能已经用过饼图，但默认的标签可能不够满足他们的需求，比如显示格式、位置或者样式的问题。所以，我需要解释清楚如何在ECharts里自定义这些标签，可能包括label配置项和富文本样式。
首先，我应该介绍label配置的位置，比如在series.label里设置。然后提到formatter函数，用户可以用字符串模板或者回调函数来格式化内容。比如显示百分比、数值、名称等。
然后，可能需要提到label的样式，比如字体颜色、大小、对齐方式，还有边框和背景色。这部分用户可能想调整外观以符合他们的设计需求。
接下来是位置调整，position参数，比如inner、outer、center等，或者具体坐标。用户可能需要标签在饼图内部或外部，或者特定位置，比如引导线连接的位置。
还有富文本样式rich，允许不同部分不同的样式，比如数值加粗，单位变小。这可能对突出某些信息有用。
最后，可能需要一个完整的示例代码，展示各个配置项如何组合使用，这样用户可以直接参考或修改。同时要提醒常见问题，比如标签重叠，可能需要调整布局或引导线设置。
还要考虑用户可能的实际应用场景，比如数据展示时需要更详细的信息，或者美观调整。需要确保解释清晰，步骤详细，让不同技术水平的用户都能理解。
检查有没有遗漏的部分，比如触发事件或动态更新标签，但可能超出当前问题范围。保持回答集中在自定义标签的配置上，避免过于复杂。确保语言口语化，不用专业术语过多，结构清晰，分点说明。</think>ECharts 的饼图（Pie Chart）支持高度自定义的标签（Label），允许你调整标签内容、样式、位置等，以满足不同的数据可视化需求。以下是自定义标签的常见配置方法：
---
### **1. 基础标签配置**
在 `series` 的 `label` 属性中配置标签，常用选项包括：
```javascript
series: [{
type: 'pie',
data: [...],
label: {
show: true, // 是否显示标签
position: 'outer', // 标签位置（'outer'外/ 'inner'内/ 'center'中心）
formatter: '{b}: {c} ({d}%)', // 内容格式（见下文）
color: '#333', // 文字颜色
fontSize: 12, // 字体大小
align: 'center', // 对齐方式
borderWidth: 1, // 边框宽度
borderColor: '#000',// 边框颜色
backgroundColor: '#fff' // 背景色
}
}]
```
---
### **2. 标签内容格式化 (`formatter`)**
通过 `formatter` 自定义标签内容，支持 **字符串模板** 或 **回调函数**：
- **字符串模板**（常用占位符）：
```javascript
formatter: '{a|名称}: {b}\n{c} 值 ({d}%)',
```
- `{a}`: 系列名称
- `{b}`: 数据项名称
- `{c}`: 数值
- `{d}`: 百分比
- `{@xxx}`: 数据中的 `xxx` 字段（如 `{@value}`）
- **回调函数**（更灵活）：
```javascript
formatter: (params) => {
return `${params.name}: ${params.value} (${params.percent}%)`;
}
```
---
### **3. 标签位置调整 (`position`)**
- **预定义位置**：
- `'outer'`: 标签在饼图外侧（默认）
- `'inner'`: 标签在饼图内侧
- `'center'`: 标签在饼图中心（适合总和显示）
- **自定义坐标**：
```javascript
label: {
position: [20, '50%'], // X/Y 坐标（像素或百分比）
align: 'left' // 根据位置调整对齐
}
```
---
### **4. 富文本样式 (`rich`)**
使用 `rich` 定义不同文本块的样式：
```javascript
label: {
formatter: '{name|{b}}\n{value|{c}}',
rich: {
name: {
fontSize: 14,
color: 'blue',
padding: [5, 0]
},
value: {
fontSize: 18,
fontWeight: 'bold',
color: 'green'
}
}
}
```
---
### **5. 引导线调整 (`labelLine`)**
当标签在外部时，可调整引导线样式：
```javascript
label: {
position: 'outer',
},
labelLine: {
show: true, // 是否显示引导线
length: 10, // 第一段线长度
length2: 15, // 第二段线长度
smooth: 0.2, // 弯曲度（0-1）
lineStyle: {
color: '#999', // 颜色
width: 2 // 宽度
}
}
```
---
### **6. 完整示例**
```javascript
option = {
series: [{
type: 'pie',
data: [
{ name: 'A', value: 40 },
{ name: 'B', value: 30 },
{ name: 'C', value: 20 }
],
label: {
show: true,
position: 'outer',
formatter: '{b}\n{d}%',
fontSize: 14,
color: '#666',
rich: {
b: { fontWeight: 'bold' }
}
},
labelLine: {
lineStyle: {
color: '#999'
}
}
}]
};
```
---
### **常见问题**
- **标签重叠**：通过 `avoidLabelOverlap: true`（默认开启）自动调整布局。
- **隐藏小百分比标签**：在 `formatter` 中判断 `params.percent`，返回空字符串。
- **动态更新标签**：结合 `setOption` 更新数据后重新渲染。
通过灵活组合这些配置，可以轻松实现饼图标签的个性化展示！
项目地址: https://gitcode.com/open-source-toolkit/106a5 
扫一扫
3897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
