关键点:饼图传入两份数据,一份设置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