echarts的饼图，可以在饼图的每个扇形上面显示文字和数据吗

Posted 2023-05-04

app.title = '饼图';
option =
tooltip:
trigger: 'item',
formatter: "a <br/>b: c (d%)"
,
legend:
orient: 'vertical',
x: 'left',
data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
,
series: [

name:'访问来源',
type:'pie',
selectedMode: 'single',
radius: [0, '80%'],
 label:
normal:
position: 'inner',
formatter: "b: c (d%)"

,
labelLine:
normal:
show: false

,
data:[
value:335, name:'直达', selected:true,
value:679, name:'营销广告',
value:1548, name:'搜索引擎'
]
,
]
;

参考技术A 解决这个问题参考的是将鼠标移动到扇形上的显示方法:
tooltip :
trigger: 'item',
formatter: "a <br/>b : c (d%)"
,

从而得来这个问题的解决方案(蓝色字体)：
series : [

name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
value:335, name:'直接访问',
value:310, name:'邮件营销',
value:234, name:'联盟广告',
value:135, name:'视频广告',
value:1548, name:'搜索引擎'
],
itemStyle:
normal:
label:
show: true,
formatter: 'b : c (d%)'
,
labelLine :show:true



]

解决啦。 参考技术B 可以 添加数据标签。

Flex 3.0：在饼图的图例中显示数据

【中文标题】Flex 3.0：在饼图的图例中显示数据

【英文标题】：Flex 3.0 : Showing data in the legend of a Pie Chart

【发布时间】：2010-10-04 22:10:28

【问题描述】：

我是 Adob​​e Flex 3.0 的新手。我需要在饼图图例中显示数据，以及彩色标记。我对如何去做有一些模糊的想法。 （也许我必须编写我的自定义legendMarkerRenderer。）有人可以指点一下吗？网上关于这方面的例子并不多。

提前致谢！

公关

【问题讨论】：

最好在标题或至少在问题描述中指定这是一个关于 Flex 的问题。 flex 标签是唯一指向它的指针，我很确定它不够清楚。

【参考方案1】：

要在 Legend 上显示数据，您需要扩展 LegendItem 类。您可以在我的博客中看到的示例：http://northam.blogspot.com/2009/05/flex-showing-data-in-legend-of-pie.html

享受吧！

【参考方案2】：

您始终可以根据您的要求自定义 flex 中的 UI 控件。 所以你可以扩展图例类

也看看@这个：liveDocs

【参考方案3】：

这是一个对您非常有用的链接。 Flex 3 组件资源管理器...它提供了如何实现大多数（如果不是全部）adobe flex 组件的示例。如果您想要更复杂的东西，您可能需要扩展图例并创建自己的组件。从事物的声音来看，它应该足以让你继续前进

Flex 3 Component Explorer（链接失效）