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

解决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标题字体大小_echarts饼图显示百分比

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

option = {

      title : {

      text: “全局指标状态分布图”,

            x:”left”,

            y:”top”

      },

      tooltip : {

            show: true,

            formatter: “{a} <br/>{b} : {c} ({d}%)”

      },

      color:[“red”, “green”,”yellow”,”blueviolet”]

}

echarts标题字体大小_echarts饼图显示百分比

刷新数据

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