echarts 饼配置项内容和展示

      option = {
  legend: {
    orient: 'horizontal',
    bottom: 10,
    left: 'center',
    textStyle: {
      fontSize: 14,
      fontWeight: 400,
    },
    data: [
      {
        name: '无条件',
        icon: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAYAAAD/Rn+7AAAB7klEQVRIS82WsWtTURSHv99LW6lTBEPRRVyU0qWTjk6KlEpB6XMWhwrFGgT/BjcNrYs4OZpQqpsitCAOgg4Z7FwRFwlIFGupJPnJK7zaNn19L0qT3OnBveecj/Pd++4VHYyVFQ98rDHagHFg3HBG5hgib8hj8oIhRB2oY+rRt82XAKoMUA2Gqc5N6EfWsjpooe2gVOG8xZRaXESM2T6SNfl+6yQZWAPeCJZOwusw1EZSzjbAxx88uP6Jy7SYkpk0HvkfoPRYrUu8klkaFM9nQ/3cGbMNWHrhETaZMdyyfSI98SGskL5LPJFZKIb6HFXQfNnnGuI2JsQeOoSyHaeU1EQs5gIe6sEzl8HTHWfpSoAqUQcLTVi1XehKzYxFJNVyMLa1B0sVT7daUSf7ZwSBwuK0KtuHpL9Uq3L3usKtQxL3rF9Ux2rnQtV2AfaL6lht3Li2H3VvVf9VmwjYK9V71SYC9kr1XrUHAkaT3VXdrjYVsFuqk9SmAmZSLX0TLEu8o8VXctRsNjHHgQJmFHHJ9tmkKyBJbSbARNXSyyDH/TtXeSuplXb/LJR9ugH3DDd3P0iS1WYG3Kla0qpy3Che0/s0qP3mHy361O8mT7EvpKnNDBirtpk4OszszBX9+he4OCZ6EG+sMQ8sR3dtWq4/l6jpu4Fb87QAAAAASUVORK5CYII=
`,
      },
      {
        name: '完全不公开',
        icon: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAYAAAD/Rn+7AAAB9UlEQVRIS82WPWhTYRhGz5M0dRCkiqE4iYtSunRScBEHpRRNpmYXBwVxEVyMEINUR0EncXJtkRr/UIQK4iDokKWzUCwiAYliI6K5j6SkNW1zc2+UJrnLHb735/Cd70908RVeeSioMRbUmUiYCcNBYDcwYhhp/DHDiKqgClQNVYmPCigHojyUolyc0re4bdUpsGAngicccZ2sxQlgHHtH3OJt4yQDHzCvJeb3pHl56ah+hNXcAnj3vVPLn5gMArKGU9ij/wUUlSytCF4I5hO7eFg8ru+tKeuAMyWP1sw54Dx4X1Td7RnX1wTcSyS4U8xoqdFDhcc+XA+4iMkZD29P426rqi7xICluKV/yLPZ0tyV6Ei/N6cYzp1d+sYid7knTuE2kys4U46trMF/yNPZs3NyexEm5mazm1jfJQKmW5mayyq1ukrXZGBjVTbVXplTZADgwqptq1yZuy0HdV9UtakMB+6Z6k9pQwL6p3qS2I2ATsncHeBu1kYA9Ux2iNhIwjmqhL4gF4K3gs5JUAvOTOnsRacwY4qTtQ6GHe4jaWIBhqiU9N9wcyvCmKAVRN8vVRz6AuYw5u+FB0kFtbMBW1ZIWJc5cz+hdFFS78fxT79dv7ts+RoTa2IB/VTOVSnLh2mnV/gVuLafxIF5a5jaw0Lhro2r9ARvf6aJMBb8BAAAAAElFTkSuQmCC`,
      },
      {
        name: '有条件',
        icon: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAYAAAD/Rn+7AAAB6UlEQVRIS82WP2hTURSHv99r2ooIRmioTuKilC4dRMVBEWwoInRqdxFioRYn5+LkWDDQIU6uDVLHVG2F4iDokKWzIIJKVapotRrzk6S2MU1eXlRs3lnecO859+N95/4RfxB+NJ2g9GoAB0OUPYQ4ChzATiIlwUmgB7OGtIa9+RUvsYugIvt7ijqV/djusmo10Z4OWHx9kjKjlD0MGgT3tlu86Txh0HPMMkEwz749D3R65ktYzQZAP8t0804jwCj4Iqb/n4CiksVnrAUC5unuuqdzs59+T9kG9MNr/ZS+XgFPAIei6v6XcfEBdJvAWQ3nXlTWkAsTJ5CnsMer/ROP+AG6S1cwIxcyc8BYPLgaKPLy8lSK9Y0VIBUzyFX29g5We9D3M2OUqfzJ+ETAuNK5fG2TxEt1XiO5yp6gBhgf1Ztqz2RX6wBjo/qX2q1eazyoO6t6W204YOdU16kNBeyY6h1qWwJWIXdXdYPaaMDdU91UbSRgW6rFe9AS9hMCvUGqHA0blN0HToEGMGnwsdAbIERtW4ChqqUCcJP0wcfSjXLU9eOFq0fg23XM5R0PklC17QPWq14hkbik87NPo6CajXtx8jCl73cwZ4GWatsGrKnWBfo8qeO59b+B28qpPojf6haBlyp3bVStnxahy3rNxNkqAAAAAElFTkSuQmCC
`,
      },
    ],
  },
  angleAxis: {
    type: 'category',
    z: 3,
    axisLine: {
      lineStyle: {
        width: 1,
        type: 'solid',
        color: '#7BB0FE',
      },
    },
  },
  polar: {
    center: ['50%', '45%'],
    radius: '55%',
  },
  radiusAxis: {
    show: false,
  },
  series: [
    {
      type: 'pie',
      radius: ['38%', '52%'],
      center: ['50%', '45%'],
      clockwise: true,
      zlevel: 100,
      hoverAnimation: false,
      itemStyle: {
        borderWidth: 0,
      },
      label: {
        normal: {
          show: true,
          padding: [0, -60, 25, -50],
          verticalAlign: 'top',
          formatter: function (params) {
            return '{number|' + params.percent.toFixed(0) + '}' + '{percent|' + '%}';
          },
          rich: {
            number: {
              fontWeight: 600,
              fontSize: 25,
            },
            percent: {
              fontSize: 14,
              lineHeight: 14,
            },
          },
        },
      },
      labelLine: {
        length: 25,
        length2: 60,
      },
      emphasis: {
        label: {
          show: true,
        },
      },
      data: [
        {
          value: 20,
          name: '无条件',
          itemStyle: {
            color: '#8EA9FE',
          },
          labelLine: {
            lineStyle: {
              color: '#8EA9FE',
            },
          },
        },
        {
          value: 20,
          name: '完全不公开',
          itemStyle: {
            color: '#82C885',
          },
          labelLine: {
            lineStyle: {
              color: '#82C885',
            },
          },
        },
        {
          value: 20,
          name: '有条件',
          itemStyle: {
            color: '#FCA036',
          },
          labelLine: {
            lineStyle: {
              color: '#FCA036',
            },
          },
        },
      ],
    },
    {
      /* 此为背景色 */
      type: 'pie',
      radius: ['38%', '55%'],
      center: ['50%', '45%'],
      hoverAnimation: false,
      emphasis: {
        itemStyle: {
          color: '#E6F3FF',
        },
      },
      data: [
        {
          value: 100,
          itemStyle: {
            color: '#E6F3FF',
          },
        },
      ],
    },
  ],
};