关键点:饼图传入两份数据,一份设置label在外显示,一份在内显示,设置不同信息,位置叠加
/*饼图:项目状态*/
var myChart = echarts.init(document.getElementById('echarts-pie'));
// 指定图表的配置项和数据
var option = {
title : {
text: '项目状态',
x:'center'
},
color:['#477dea', '#9a9a9a','#f2b644'],
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
normal:{
show: true,
position: 'inside',
formatter: '{d}%'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['已签单','实施中','已完成']
},
series : [
{
name: '',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data:[
{value:335, name:'已签单'},
{value:310, name:'实施中'},
{value:234, name:'已完成'}
],
label:{ //饼图图形上的文本标签
normal:{
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 10 //文字的字体大小
},
formatter:'{d}%' //显示%
}
}
},
{
name: '',
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
data:[
{value:335, name:'已签单'},
{value:310, name:'实施中'},
{value:234, name:'已完成'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label:{ //饼图图形上的文本标签
normal:{
show:true,
position:'outer', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 10 //文字的字体大小
},
formatter:'{c}' //显示%
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
参考链接:https://blog.csdn.net/wangchaohpu/article/details/81669856
