大家好，又见面了，我是你们的朋友全栈君。

解决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;">

如何给eCharts饼图区域指定颜色

1. option = {
   
2.         title : {
   
3.         text: “全局指标状态分布图”,
4.                x:”left”,
5.                y:”top”
6.         },
7.         tooltip : {
   
8.                show: true,
9.                formatter: “{a} <br/>{b} : {c} ({d}%)”
10.         },
11.         color:[“red”, “green”,”yellow”,”blueviolet”]
12. }

刷新数据

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

 点击 id=”ig” 图片，id=”container” 饼图刷新

 

<#–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>
<#–结束–>