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);
}
echarts 饼图,外部标签和内部标签一起展示
于 2022-08-03 16:31:13 首次发布