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);

echarts饼图显示百分比,和显示内容字体及大小_第1张图片

你可能感兴趣的:(前端技术)