使用echarts饼状图label既在内部显示数值(百分比),又显示外部指示线
更新时间：2024年03月13日 15:47:30 作者：小刘加油！
这篇文章主要介绍了使用echarts饼状图label既在内部显示数值(百分比),又显示外部指示线问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
需求
项目开发中，产品经理绘制的原型图中，需要前端实现一个饼状图，且既在饼图内部中 显示 百分比，又显示 外部指示线及数值
效果如下图所示：
查了下Echarts官网文档
需要配置 series 下的 label 配置项
如下所示：
series: [
label: {
normal: {
position: 'inside' // 在内部显示，outseide 是在外部显示
show: true,
formatter: '{c} // formatter 是标签内容的格式器，用于转换格式。支持 字符串和回调函数两种形式。
}
}
]
其中，formatter 是标签内容的格式器，用于转换格式。
支持 字符串和回调函数两种形式。
{c} 代办字符串模板变量，表示数据值，常用的模板变量有：
- { a }：系列名
- { b }：数据名
- { c }：数据值
- { d }：百分比
问题来了
echarts 好像没法直接配置成 内部+外部 同时展示的情况。
因为在单个的 series 中（即其中的一个对象中），只能设置一个label。
不过也好解决
通过查看 echarts 官网 series 配置项，可以看出，series 是一个数组（如上图所示），既然单个中只能出现一个，那么我配置成 2个（多个）相同的对象，让他们重合，就会出现两个 label 标签，一个在内部展示，一个在外部展示，就可以完美解决这种情况。
代码实例如下所示：
series: [
{
type: 'pie',
radius: '90%',
data: [
{ value: data?.winBidNumber || 0, name: '中标数量' },
{ value: data?.loseBidNumber || 0, name: '未中标数量' },
{ value: data?.abandonBidNumber || 0, name: '弃标数量' }
],
labelLine: {
show: true,
position: 'outside',
length: 10,
length2: 50
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
position: 'outside',
show: true,
formatter: (d: any) => {
console.log(222, d);
return d.name + '（' + d.value + '次' +'）'
}
}
}
},
{
type: 'pie',
radius: '90%',
data: [
{ value: data?.winBidNumber || 0, name: '中标数量' },
{ value: data?.loseBidNumber || 0, name: '未中标数量' },
{ value: data?.abandonBidNumber || 0, name: '弃标数量' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
position: 'inside',
show: true,
formatter: (d: any) => {
return d.percent + '%'
}
}
}
}
]
其中， labelLine 属性 是 用来配置 外部指示线（第一段、第二段）的长度及样式的。
formatter 为 回调函数的写法如上面的代码实例，该回调函数接收一个参数，该参数的值包含了 模板字符串变量所拥有的值
如下图打印的所示：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持程序员之家。
相关文章
可能很多人在学习 JavaScript 过程中碰到过函数参数传递方式的迷惑，本着深入的精神，我给大家分享了一篇教程关于javascript中的函数调用知识，感兴趣的朋友一起学习吧2017-03-03
很神奇！js+CSS+DIV实现文字颜色渐变效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
LRU全称为Least?Recently?Used，即最近使用的。针对的是在有限的内存空间内，只缓存最近使用的数据（即get和set的数据）。本文介绍了JavaScript实现LRU缓存的三种方式，需要的可以参考一下2022-06-06
这篇文章主要介绍了JavaScript关联数组用法,结合实例形式分析了关联数组的概念、定义与遍历操作相关实现技巧,需要的朋友可以参考下2017-03-03
promise结合requestAnimationFrame用法示例
这篇文章主要为大家介绍了promise结合requestAnimationFrame用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
本文主要介绍了小程序中读取腾讯文档的表格数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了js实现使用鼠标拖拽切换图片的方法,涉及javascript操作图片实现轮播效果的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
深拷贝和浅拷贝是面试中经常出现的,主要考察对基本类型和引用类型的理解深度,本文主要给大家介绍了js实现深拷贝和浅拷贝的方式,需要的朋友可以参考下2022-05-05
在XX项目里面需要通过一个iframe去刷新同一窗口的另外一个iframe。一个超级简单的处理，但我还在blog上记一记，有些看似简单的东西，在真实项目应用中还是值得思考地方2011-01-01
这篇文章主要为大家详细介绍了如何使用canvas实现有趣的弹簧效果,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下2023-12-12
最新评论