Echarts实现百分⽐在饼图内部，说明在饼图外部
Echarts怎么实现下⾯这种效果：
重点在下⾯代码中的series设置⾥⾯，使⽤两个重合的饼形图实现此种效果。饼形图的⼤⼩位置等都⼀样。唯⼀不同的就是
label中的position属性（说明⽂字为“outer”，百分⽐为“inner”）labelLine中的show属性（说明⽂字为false，百分⽐为true）
和显⽰⽂字（⼀个显⽰百分⽐，⼀个显⽰说明⽂字）
var pieEchart = echarts.ElementById('residentIDPie'));
pieoption = {
title: {
text: '',
subtext: '',
fontweight属性boldx: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{b}"
},
series: [
/
/重点在这⾥，以下代码实现图中效果，使⽤两个重合的饼形图实现此种效果。饼形图的⼤⼩位置等都⼀样。唯⼀不同的就是label中的position属性（说明⽂                  {
name: '',
type: 'pie',  //饼状图
radius: '50%',  //⼤⼩
center: ['50%', '50%'],    //显⽰位置
data: sexNum,  //数据，我们ajax获取
itemStyle: {
normal: {
label: {
show: true,
position: 'outer',
fontSize: 18,
fontWeight:'bold',
align: "left",
formatter: function (p) {  //指⽰线对应⽂字，说明⽂字
return p.data.name;
}
},
color: function (params) {
//⾃定义颜⾊
var colorList = ['#00CD00', '#FF7F00'];
return colorList[params.dataIndex]
},
labelLine: {    //指⽰线状态
show: false,
smooth: 0.2,
length: 10,
length2: 20
}
}
}
}
},
{
name: '',
type: 'pie',
avoidLabelOverlap: true,
radius: '50%',
center: ['50%', '50%'],
data: sexNum,
itemStyle: {
normal: {
label: {
show: true,
position: 'inner',
fontSize: 26,
fontWeight: 'bold',
align:"left",
formatter: function (p) {  //指⽰线对应⽂字，百分⽐                                return p.percent + "%";
}
},
color:function(params) {
//⾃定义颜⾊
var colorList = ['#00CD00', '#FF7F00'];
return colorList[params.dataIndex]
},
labelLine: {    //指⽰线状态
show: true,
smooth: 0.2,
length: 10,
length2: 20
}
}
}
}
]
};
pieEchart.setOption(pieoption);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。