ECharts饼图-富文本标签，附视频讲解与代码下载

如果您在 ECharts 饼图中使用了富文本标签，并且发现部分标签超出了饼图的区域被遮挡了，可以尝试使用 ECharts 提供的 `rich` 配置项来调整标签的样式和布局，使其适应饼图的大小。 具体来说，您可以在 `series.label` 中设置 `formatter` 属性为一个函数，用于格式化标签文本并使用 `rich` 配置项来定义富文本标签的样式。例如： ```javascript option = { series: [{ type: 'pie', label: { formatter: function(params) { return '{a|' + params.name + '}\n{b|' + params.value + '}'; }, rich: { a: { color: '#333', fontSize: 14, lineHeight: 20 }, b: { color: '#999', fontSize: 12, lineHeight: 16 } } }, // ... 其他配置项 }] }; ``` 在上面的示例中，我们使用 `{a|...}` 和 `{b|...}` 的方式来定义富文本标签的样式，其中 `a` 和 `b` 是自定义的样式名称，可以在 `rich` 配置项中定义它们的样式。通过设置 `lineHeight` 属性，可以控制文本行之间的距离，以适应饼图的大小。 如果您需要更复杂的富文本布局，可以在 `rich` 配置项中定义多个样式名称，并在 `formatter` 函数中使用它们来构建富文本布局。例如，您可以使用 `rich` 配置项中的 `title`、`value` 和 `percent` 样式，在标签中显示标题、数值和百分比信息： ```javascript option = { series: [{ type: 'pie', label: { formatter: function(params) { return '{title|' + params.name + '}\n{value|' + params.value + '}\n{percent|' + params.percent + '%}'; }, rich: { title: { color: '#333', fontSize: 14, lineHeight: 20, fontWeight: 'bold' }, value: { color: '#999', fontSize: 12, lineHeight: 16 }, percent: { color: '#999', fontSize: 12, lineHeight: 16 } } }, // ... 其他配置项 }] }; ``` 在上面的示例中，我们使用 `{title|...}`、`{value|...}` 和 `{percent|...}` 的方式来定义不同样式名称，并在 `rich` 配置项中分别定义它们的样式。在 `formatter` 函数中，我们使用这些样式名称来构建富文本布局，并在标签中显示标题、数值和百分比信息。