echarts仿支付宝芝麻信用分环形图

效果图

配置

// 支付宝芝麻信用环形图

const options = {
  graphic: [ //为环形图中间添加文字
    {
      type: "text",
      left: "center",
      top: "48%",
      style: {
        text: '得分',
        textAlign: "center",
        fill: "#999999",
        fontSize: 16,
      },
    },
    {
      type: "text",
      left: "center",
      top: "52%",
      style: {
        text: "60",
        textAlign: "center",
        fill: "#000",
        fontSize: 28,
      },
    },
  ],
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '50%'],
      // adjust the start angle
      startAngle: 220,
      silent: true,
      label: {
        show: true,
        position: 'inside',
        formatter(param) {
          // correct the percentage
          return param.name + ' (' + param.percent * 2 + '%)';
        }
      },
      data: [
        {
          value: 60,
          name: 'Search Engine',
          itemStyle: {
            color: '#FFE2DC',
          },
          label: {
            show: false
          }
        },
        {
          value: 40,
          name: 'Search Engine',
          itemStyle: {
            color: '#f1f1f1',
          },
          label: {
            show: false
          }
        },
        {
          value: 2,
          name: 'Search Engine',
          itemStyle: {
            color: '#fff',
          },
          label: {
            show: false
          }
        },
        {
          // make an record to fill the bottom 50%
          value: 36,
          name: 'A',
          itemStyle: {
            // stop the chart from rendering this piece
            color: '#f1f1f1',
            borderColor: '#fff',
            borderCap: 'square',
            decal: {
              symbol: 'none'
            }
          },
          label: {
            show: true,
            fontSize: 32,
            position: 'inside',
            formatter(param) {
              // correct the percentage
              return param.name;
            }
          }
        },
        {
          value: 2,
          name: 'Search Engine',
          itemStyle: {
            color: '#fff',
          },
          label: {
            show: false
          }
        },
      ]
    },
  ]
};

通过上边配置

data中前2条value总和100，第一条value实际进度，第二条value为剩余进度