vue中echarts饼图，百分比与标识字体同时显示

 

 在template中引入

<div class="chart">

      <div id="pie" style="height: 100%; width: 100%"></div>

    </div>

在script中实现

initPie() {

      let vm = this;

      let chartDom = document.getElementById('pie');

      let myChart = vm.$echarts.init(chartDom);

      let getsjjg = ['20~30', '30~60', '60及以上'];

      let getsjjgrs = [250, 200, 100];

      let syjgdata = [];

      for (let i = 0; i < getsjjg.length; i++) {

        syjgdata.push({

          name: getsjjg[i],

          value: getsjjgrs[i]

        });

      }

      let rich = {

        name: {

          color: '#666666',

          fontSize: 14,

          padding: [8, 30, 0, 30],

          fontWeight: '400',

          align: 'left'

        },

        value: {

          color: '#333',

          fontSize: 15,

          padding: [0, 30, 8, 30],

          fontWeight: '500',

          align: 'left'

        },

        percent: {

          color: '#FFF',

          align: 'right',

          fontSize: 15,

          fontWeight: '500'

          //padding: [0, 5]

        },

        cir: {

          fontSize: 26

        }

      };

      let colorList = ['#507AFF', '#51D9A2', '#FFC371'];

      let option = {

        title: {

          text: '年龄',

          subtext: '',

          top: '43%',

          left: '13%',

          textStyle: {

            // fontSize: 18,//字体大小

            color: '#fff' //字体颜色

          }

        },

        legend: {

          orient: 'vertical',

          top: '23%',

          left: '77%',

          textStyle: {

            // fontSize: 18,//字体大小

            color: '#fff' //字体颜色

          }

        },

        tooltip: {

          trigger: 'item',

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

        },

        series: [

          {

            name: '年龄',

            itemStyle: {

              normal: {

                color: function (params) {

                  return colorList[params.dataIndex];

                }

              }

            },

            type: 'pie',

            radius: ['0%', '50%'],

            center: ['50%', '50%'],

            label: {

              normal: {

                position: 'inner',

                formatter: params => {

                  return '{percent|' + params.percent.toFixed(0) + '%}';

                },

                rich: rich

              }

            },

            data: syjgdata

          },

          {

            itemStyle: {

              normal: {

                color: function (params) {

                  return colorList[params.dataIndex];

                }

              }

            },

            type: 'pie',

            silent: true, //取消高亮

            radius: ['0%', '50%'],

            center: ['50%', '50%'],

            data: syjgdata,

            z: -1

          }

        ]

      };

      myChart.setOption(option);

并在初始化中调用

this.initPie();

    },