|
本文共 1370 字，大约阅读时间需要 4 分钟。
 UI给出了这样一张图，饼图上不仅显示文字和数值，内部也要显示百分比。由于series中的label只能设置成饼图内部或者饼图外部，无法实现内外部兼有。此时可以在series中设置两个相同的配置对象，让两个饼图重合在一起。但一个设为内部，一个设为外部，其余的配置基本不变，代码如下
let pieEchart = this.$echarts.init(this.$refs.xxpxPie) let title = '集团公司培训\n\n' +this.barTextCenter+'人次' let option = {title:{ text:title, textStyle:{color:'#dbbb95',fontSize:45, }, left:'40%', top:'43%',},series:[ {type: 'pie',radius: ['52%', '92%'],color:['#3dc5d1', '#ee4e40', '#fbb321'],itemStyle: { borderColor: '#201f1d', borderWidth: 9, },label: { show: true, //由于默认是外部，所以这里没有写position:'outside' color:'#dbba97', fontSize: '40', formatter: '{b}\n\n{c}人次', padding: [0, -180, 120, -160], //设置外部文字的位置},labelLine: { show: true, length:48, length2:220, // minTurnAngle:120, //两条指示线之间的角度 // maxSurfaceAngle:45, //指示线与扇形的角度 lineStyle:{color:'#adadad',width:2 }},data: this.pieData, }, {type: 'pie',avoidLabelOverlap: true, //避免标签重叠radius: ['52%', '92%'],color:['#3dc5d1', '#ee4e40', '#fbb321'],itemStyle: { borderColor: '#201f1d', borderWidth: 9, },label: { show: true, position: 'inner', //将百分比显示在饼图内部 color:'#fff', fontSize: '37', formatter: '{d}%', fontWeight:'bold',},labelLine: { show: true, length:48, length2:220, lineStyle:{color:'#adadad',width:2 }},data: this.pieData, }] } pieEchart.setOption(option)
转载地址：https://blog.csdn.net/qq_40576178/article/details/121460838 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
|