Echart在餅圖中央添加文字

　　若是想要添加動態文字包括須要計算出數值的，能夠參考如下連接：http://gallery.echartsjs.com/editor.html?c=xByzFvaw1M

　　爲預防數據失效，貼出代碼以下：

　　

var scale = 1;
var echartData = [{
    value: 2154,
    name: '曲阜師範大學'
}, {
    value: 3854,
    name: '濰坊學院'
}, {
    value: 3515,
    name: '青島職業技術學院'
}, {
    value: 3515,
    name: '淄博師範高等專科'
}, {
    value: 3854,
    name: '魯東大學'
}, {
    value: 2154,
    name: '山東師範大學'
}]
var rich = {
    yellow: {
        color: "#ffc72b",
        fontSize: 30 * scale,
        padding: [5, 4],
        align: 'center'
    },
    total: {
        color: "#ffc72b",
        fontSize: 40 * scale,
        align: 'center'
    },
    white: {
        color: "#fff",
        align: 'center',
        fontSize: 14 * scale,
        padding: [21, 0]
    },
    blue: {
        color: '#49dff0',
        fontSize: 16 * scale,
        align: 'center'
    },
    hr: {
        borderColor: '#0b5263',
        width: '100%',
        borderWidth: 1,
        height: 0,
    }
}
option = {
    backgroundColor: '#031f2d',
    title: {
        text:'總考生數',
        left:'center',
        top:'53%',
        padding:[24,0],
        textStyle:{
            color:'#fff',
            fontSize:18*scale,
            align:'center'
        }
    },
    legend: {
        selectedMode:false,
        formatter: function(name) {
            var total = 0; //各科正確率總和
            var averagePercent; //綜合正確率
            echartData.forEach(function(value, index, array) {
                total += value.value;
            });
            return '{total|' + total + '}';
        },
        data: [echartData[0].name],
        // data: ['高等教育學'],
        // itemGap: 50,
        left: 'center',
        top: 'center',
        icon: 'none',
        align:'center',
        textStyle: {
            color: "#fff",
            fontSize: 16 * scale,
            rich: rich
        },
    },
    series: [{
        name: '總考生數量',
        type: 'pie',
        radius: ['42%', '50%'],
        hoverAnimation: false,
        color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
        label: {
            normal: {
                formatter: function(params, ticket, callback) {
                    var total = 0; //考生總數量
                    var percent = 0; //考生佔比
                    echartData.forEach(function(value, index, array) {
                        total += value.value;
                    });
                    percent = ((params.value / total) * 100).toFixed(1);
                    return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
                },
                rich: rich
            },
        },
        labelLine: {
            normal: {
                length: 55 * scale,
                length2: 0,
                lineStyle: {
                    color: '#0b5263'
                }
            }
        },
        data: echartData
    }]
};

　　若是想要製做簡單的顯示數據的例子可參考以下代碼，最簡單的方式就是經過title控制：
　　

var scale = 1;
    var echartData = [{
      value: 2154,
      name: '曲阜師範大學'
    }, {
      value: 3854,
      name: '濰坊學院'
    }, {
      value: 3515,
      name: '青島職業技術學院'
    }, {
      value: 3515,
      name: '淄博師範高等專科'
    }, {
      value: 3854,
      name: '魯東大學'
    }, {
      value: 2154,
      name: '山東師範大學'
    }]

    option = {
      legend: {
        orient : 'vertical',
        x : 'left',
        data:['山東師範大學','魯東大學','曲阜師範大學'/*,'濰坊學院','青島職業技術學院','淄博師範高等專科'*/]
      },
      //backgroundColor: '#031f2d',
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      title: {
        text:'總考生數',
        left:'center',
        top:'45%',
        // padding:[24,0],
        textStyle:{
          color:'#031f2d',
          fontSize:20*scale,
          align:'center'
        }
      },

      series: [{
        name: '考生數量',
        type: 'pie',
        //radius: ['45%', '50%'],
        radius : ['50%', '70%'],
        hoverAnimation: true,
        //color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
       /* labelLine: {
          normal: {
            show: false
          }
        },*/
        itemStyle : {
          normal : {
            label : {
              show : false
            },
            labelLine : {
              show : false
            }
          },

        },
        data: echartData
      }]
    };

　　運行結果以下：