html5 echarts字体大小百分比,解决echarts饼图显示百分比，和显示内容字体及大小,如何给eCharts饼图区域指定颜色...

解决echarts饼图显示百分比，和显示内容字体及大小

// 基于准备好的dom，初始化echarts实例

var pieEchart = echarts.init(document.getElementById('pieEchart'));

// 指定图表的配置项和数据

var pieoption = {

title : {

text: '公里总里程',

x:'left',

textStyle:{

color:'#FFFFFF',

fontSize:25

}

},

tooltip : {

trigger: 'item',

formatter: "{a}
{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'}}},

]

}

]

};

// 使用刚指定的配置项和数据显示图表。

pieEchart.setOption(pieoption);