查了echarts 文档,并不能通过简单的配置来实现,原因如下:在单个serie的label中,只能设置一个label,位置可以选择在饼图内部inner,或者饼图外部outer,无法实现同时实现内部、外部显示,想到设置两个serie,让两个饼图完全重合即可,一个外标签显示文字说明,另一个显示内标签,实现百分比。
解决办法:
1、可以写两个图表让他们重合,一个内部显示,一个外部显示
<div style="width: 100%;height:100px;position: relative;background-color: #fff;">
<div id="uplrfu" style="width: 100%;height:100px;box-sizing: border-box;position: absolute;top: 0;left: 0;"></div>
<div id="uplrfu2" style="width: 100%;height:100px;box-sizing: border-box;position: absolute;top: 0;left: 0;"></div>
</div>
2、series写两个对象
function piecharts() {
var myChart = echarts.init(document.getElementById('uplrfu'), 'light');
var option = {
tooltip: {
trigger: 'item'
},
legend: {
show: false
},
color: ["#0B4CB0", "#027ACF"],
series: [
{
type: 'pie',
radius: '90%',
label: { //饼图图形上的文本标签
show: true,
position: 'outside', //标签的位置
textStyle: {
fontWeight: 300,
fontSize: 14 //文字的字体大小
},
formatter: function (d) {
console.log(d);
return d.name+"\n"+d.value+"公里"
}
},
data: [
{ value: 484, name: '左幅' },
{ value: 300, name: '右幅' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},{
type: 'pie',
radius: '90%',
label: { //饼图图形上的文本标签
show: true,
position: 'inside', //标签的位置
textStyle: {
fontWeight: 300,
fontSize: 16 //文字的字体大小
},
formatter: function (d) {
return Math.round(d.percent) + '%'
}
},
data: [
{ value: 484, name: '左幅' },
{ value: 300, name: '右幅' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
}