ECharts 饼图数据放在饼图内部显示
  TEZNKK3IfmPf 20天前 18 0

将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值

原样式如下

ECharts 饼图数据放在饼图内部显示

2、业务实现

调整代码如下,核心语句已标记注释

option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [{
value: 1048,
name: 'Search Engine'
},
{
value: 735,
name: 'Direct'
},
{
value: 580,
name: 'Email'
},
{
value: 484,
name: 'Union Ads'
},
{
value: 300,
name: 'Video Ads'
}],
radius: '50%',
center: ['50%', '50%'], // 这个属性可以调整图像的位置,左面所示为中心
label: {
normal: {
show: true,
position: 'inner', // 数值显示在内部
formatter: '{d}%', // 格式化数值百分比输出
},
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};

更改后效果如下图所示

ECharts 饼图数据放在饼图内部显示

 3)附录

​​ECharts 提示框组件Tooltip属性大全(包含文本注释)​​

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 20天前 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年03月29日   30   0   0 javascriptvue
TEZNKK3IfmPf