Echarts饼图内部默认显⽰百分⽐，外部显⽰⽂字说明Echarts怎么实现下⾯这种效果：
重点:
下⾯代码中的series设置⾥⾯，使⽤两个重合的饼形图实现此种效果。
在label中的position属性中（说明⽂字为“outer”，百分⽐为“inner”）
labelLine中的show属性（说明⽂字为true，百分⽐为true)
initCharts(){
let myChart =this.$echarts.init(this.$refs.chart,"shine");
// 绘制图表
myChart.setOption({
tooltip:{
trigger:'item',
formatter:'{a} <br/>{b} : {c} ({d}%)'
},
series:[
//重点在这⾥，以下代码实现图中效果，使⽤两个重合的饼形图实现此种效果。
// 饼形图的⼤⼩位置等都⼀样。唯⼀不同的就是label中的position属性
//（说明⽂字为“outer”，百分⽐为“inner”）
// labelLine中的show属性（说明⽂字为false，百分⽐为true）
//和显⽰⽂字（⼀个显⽰百分⽐，⼀个显⽰说明⽂字）
{
name:'',
type:'pie',//饼状图
radius:'60%',//⼤⼩
center:['50%','50%'],//显⽰位置
data:[{
value:748,
name:'北京'
},
{
value:410,
name:'天津'
},
{
value:234,
name:'深圳'
},
{
value:335,
name:'张家⼝'
},
{
value:445,
name:'⽯家庄'
}
],//数据，我们ajax获取
itemStyle:{
normal:{
label:{
show:true,
position:'outer',
fontSize:12,
fontWeight:'bold',
align:"left",
formatter:function(p){//指⽰线对应⽂字，说明⽂字
return p.data.name;
}
},
},
labelLine:{//指⽰线状态
show:true,
smooth:0.2,
length:10,
length2:20
}
}
}
},
{
name:'',
type:'pie',
avoidLabelOverlap:true,
radius:'60%',
center:['50%','50%'],
data:[{
value:748,
name:'北京'
},
{
value:410,
name:'天津'
},
{
value:234,
name:'深圳'
},
{
value:335,
fontweight属性bold
name:'张家⼝'
},
{
value:445,
name:'⽯家庄'
}
],
itemStyle:{
normal:{
label:{
show:true,
position:'inner',
fontSize:12,
fontWeight:'bold',
align:"left",
formatter:function(p){//指⽰线对应⽂字，百分⽐
return Fixed(0)+"%";//设置百分⽐保留⼏位⼩数
}
},
labelLine:{//指⽰线状态
show:true,
smooth:0.2,
length:10,
length2:20
}
}
}
}
]
});
},

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