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} <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;">

option = {
 
        title : {
 
        text: "全局指标状态分布图",
               x:"left",
               y:"top"
        },
        tooltip : {
 
               show: true,
               formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color:["red", "green","yellow","blueviolet"]
}

此代码由Java架构师必看网-架构君整理
 <div class="foot_ri" id="txt">
        <div class="foot_txt">
            <span style="color: #6e85bf;font-size: 20px">诉求百分比占比</span>
            <div id="container" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"_echarts_instance_="ec_1550106173775">
                <div style="position: relative; overflow: hidden; width: 1920px; height: 1037px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                    <canvas data-zr-dom-id="zr_0" width="1920" height="1037"
                            style="position: absolute; left: 0px; top: 0px; width: 1920px; height: 1037px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
                </div> 
            </div>
        </div>
    </div>
 
    <img src="../static/images/refresh.png" id="ig" style="margin-top: -370px;margin-left: 935px;">
</div>

 <#--2019/2/13饼图-->
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {

        // title: {

        //     text: '诉求百分比占比',
        //     subtext: '',
        //     x: 'center'
        // },
        tooltip: {

            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"/*鼠标经过显示*/
        },
        // color:['#0160ae', '#36a5fc','#0d86e7'],
        color: ['#6f87bf', '#7084a2', '#5e6787'],
        legend: {

            orient: 'vertical',
            // bottom: 500,
            left: 'right',
            data: ['咨询', '意见建议', '投诉举报'],
            textStyle: {

                fontWeight: 300,
                fontSize: 16,    //文字的字体大小
                color: '#345cc1'//文字的字体颜色
            },
        },
        series: [
            {

                name: '访问来源',
                type: 'pie',
                radius: '65%', /*饼图大小*/
                center: ['40%', '50%'], /*饼图位置*/
                data: [
                    {value: 335, name: '咨询'},
                    {value: 234, name: '意见建议'},
                    {value: 135, name: '投诉举报'}
                ],
                itemStyle: {

                    emphasis: {

                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    ;
    if (option && typeof option === "object") {

        myChart.setOption(option, true);
    }
</script>
<#--结束-->
<#--2019/2/15刷新数据-->
<script>
    $('#ig').click(function () {

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        myChart.setOption({ //加载数据图表
            series: {

                // 根据名字对应到相应的系列
                name: ['数量'],
                data: [
                    {value: 222, name: '咨询'},
                    {value: 555, name: '意见建议'},
                    {value: 56, name: '投诉举报'}
                ]
            }
        })
    })
</script>
<#--结束-->