1. 程式人生 > >解決echarts餅圖顯示百分比,和顯示內容字體及大小

解決echarts餅圖顯示百分比,和顯示內容字體及大小

fonts mat 好的 pan har tle title log option

    // 基於準備好的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} <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‘}}}, ] } ] }; // 使用剛指定的配置項和數據顯示圖表。 pieEchart.setOption(pieoption);
<div id="pieEchart" style="width: 480px;height:300px;">

技術分享圖片

解決echarts餅圖顯示百分比,和顯示內容字體及大小