echars 饼图使用

option = {

      tooltip: {

        trigger: 'item',

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

      },

      legend: {

        orient: 'vertical',

        x: 'right',

        y: 'center',

        align: 'left',//文字永远在左侧

        icon: 'circle',// 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

        data: [

          {

            name: '红码人数',

            textStyle: {

              fontSize: 12,

              color: 'white'

            }

          },

          {

            name: '黄码人数',

            textStyle: {

              fontSize: 12,

              color: 'white'

            }

          },

          {

            name: '绿码人数',

            textStyle: {

              fontSize: 12,

              color: 'white'

            }

          }

        ],

        formatter(name) {   //文字显示图形数据

          var index = 0;

          var clientlabels = ['红码人数','黄码人数','绿码人数'];

          var clientcounts = [`${data.red}`,`${data.yellow}`,`${data.green}`];

          clientlabels.forEach((value,i) => {

            if (value === name){

              index = i;

            }

          });

          return `${name}  ${clientcounts[index]}`;

        }

      },

      color: ['red', 'yellow', 'green'],

      series: [

        {

          name: '',

          type: 'pie',

          radius: ['35%', '45%'],

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

          avoidLabelOverlap: false,

          label: {

            normal: {

              show: true,

              position: 'center',

              formatter(argument) {

                var html;

                html = `${data.number}\r\n\r\n总人数`;

                return html;

              },

              textStyle: {

                fontSize: 15,

                color: '#fff'

              }

            }

          },

          labelLine: {

            show: false

          },

          data: [

            { value: `${data.red}`, name: '红码人数' },

            { value: `${data.yellow}`, name: '黄码人数' },

            { value: `${data.green}`, name: '绿码人数' }

          ]

        }

      ]

    };