解决echarts饼图显⽰百分⽐，和显⽰内容字体及⼤⼩
// 基于准备好的dom，初始化echarts实例
var pieEchart = echarts.ElementById('pieEchart'));
// 指定图表的配置项和数据
var pieoption = {
title : {
text: '公⾥总⾥程',
x:'left',
textStyle:{
color:'#FFFFFF',
fontSize:25
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} KM"
},
legend: {
orient : 'vertical',
x : 'left',
top:40,
itemWidth:70,
itemHeight:30,
formatter: '{name}',
textStyle:{
color: '#FFFFFF'
},
data:[{name:'⾼速50KM',icon:'rect'},{name:'⼀级150KM',icon:'rect'},{name:'⼆级150KM',icon:'rect'},{name:'三级100KM',icon:'rect'},{name:'四级50KM',icon:'rect'}]  }            ,
calculable : true,
series : [
{
name:'公⾥总⾥程',
type:'pie',
radius : '70%',//饼图的半径⼤⼩
center: ['60%', '60%'],//饼图的位置
label:{            //饼图图形上的⽂本标签
normal:{
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 16    //⽂字的字体⼤⼩
},
formatter:'{d}%'
}
},
data:[
{value:50,name:'⾼速50KM',itemStyle:{normal:{color:'#FE0000'}}},
{value:150,name:'⼀级150KM',itemStyle:{normal:{color:'#F29700'}}},
{value:150,name:'⼆级150KM',itemStyle:{normal:{color:'#02B0ED'}}},
{value:100,name:'三级100KM',itemStyle:{normal:{color:'#55E87D'}}},
{value:50,name:'四级50KM',itemStyle:{normal:{color:'#FFE200'}}},
]
setoption
}
]
};
// 使⽤刚指定的配置项和数据显⽰图表。
pieEchart.setOption(pieoption);
<div id="pieEchart" >

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