echarts饼图显示百分比和显示内容字体及大小属性设置

 

源码

let circularGraph= {
         title: "标题",
         head: false,
         tuglie: [
           "微信",
           "支付宝",
           "银行卡",
           "聚合支付"
         ],
         data: [
           {
             name: "度小满",
             value: 22,
           },
           {
             name: "广大云",
             value: 26,
           },
           {
             name: "闪支付",
             value: 44,
           },
           {
             name: "聚合支付",
             value: 66,
           },
         ],
         sum: {
           name: ["支付笔数"],
           number: 341,
         },
         color: [
             "#FFBA1F",
             "#30C9C9",
             "#FF2934",
             "#A878E8",
           "#9F9BFF",
           "#FF6465",
           "#36F2F2",
           "#2E4D90",
           "#FC38A4",
           "#F87930",
            "#59FD29",
            "#5FD879",
         ],
       }


option = {
        title: {
          text: circularGraph.title, //标题文本
          left: "center",
          show: circularGraph.head, //是否显示标题组件
        },
        grid: {
           left: "3%",
           right: "4%",
           bottom: "3%",
           containLabel: true,
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {d}%",
        //   formatter: "{b}: {c} ({d}%)",
        },
        legend: {
          show: true,
          orient: "visualMap", //图例水平对齐排列
          x: "right",
          y: "center",
          padding:[0,20,0,0],
          textStyle: {
            //图例文字的样式
            color: "#333",
            fontSize: 12,
          },
          data: circularGraph.data.tuglie, //图例组件
        //   formatter: (name) => {
        //     let num = "";
        //     circularGraph.data.forEach((item) => {
        //       //格式化图例文本，支持字符串模板和回调函数两种形式。
        //       if (item.name === name) {
        //         num = String(item.value).replace(/(\d)(?=(?:\d{6})+$)/g, "$1.");
        //         return;
        //       }
        //     });
        //     return name + "：" + num;
        //   },
        },
        // graphic: {
        //   type: "text",
        //   left: '37%',
        //   top: "center",
        //   style: {
        //     text:
        //       circularGraph.sum.name + //圆饼中心显示数据，这里是显示得总数
        //       "\n\n" +
        //       String(circularGraph.sum.number).replace(/(\d)(?=(?:\d{6})+$)/g, "$1."),
        //     textAlign: "center",
        //     fill: "#333",
        //     width: 30,
        //     height: 30,
        //     fontSize: 14,
        //   },
        // },
        series: [
          {
            type: "pie",
            // radius: ["35%", "65%"],
            // center: ['40%', '50%'],
            
            label:{ //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'inner', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字体大小
                    },
                    formatter:'{d}%'
                }
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position:'inner', //标签的位置
                  textStyle: { color: "#333", fontSize: "14" },
                  formatter: function (val) {
                    //让series 中的文字进行换行
                    // return val.name;
                    return val.name + "\n(" + val.percent + "%)";
                  },
                },
                labelLine: {
                  show: true,
                  lineStyle: { color: "#3c4858" },
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                textColor: "#000",
              },
            },
            data: circularGraph.data, //数据
          },
        ],
        color: circularGraph.color //颜色
      };

 

源码 

option = {  
            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'}}},
                    ]
                }  
            ]  
        };