Echarts在线免费图表

 
            option = {
  backgroundColor: '#fff',
  tooltip: {
    trigger: "item",
    formatter: "数据统计 <br/>{b} : {c} ({d}%)"
  },
  // 还原内部文字
  title: {
    text: '得分',
    top: "45%",
    left: "center",
    subtext: "占比",
    itemGap: 8,
    textStyle: {
      color: "#18191B",
      fontSize: 28,
      fontWeight: 400
    },
    subtextStyle: {
      color: "#18191B",
      fontSize: 28
    },
  },
  color: [
    "#F5B01D",
    "#1B86E9",
    "#0C9B8D",
    "#445565",
  ],
  series: [
    // 外部真实圆环
    {
      name: "心率分布",
      type: "pie",
      radius: ["40%", "57%"],
      center: ["center", "center"],
      data: [
        {
          value: 7.6,
          name: "优秀",
          label: {
            color: "#F5B01D"
          }
        },
        {
          value: 15.2,
          name: "良好",
          label: {
            color: "#1B86E9"
          },
          color: "#1B86E9"
        },
        {
          value: 62.4,
          name: "及格",
          label: {
            color: "#0C9B8D"
          },
          color: "#0C9B8D"
        },
        {
          value: 14.8,
          name: '不及格',
          label: {
            color: "#445565"
          },
          color: "#445565"
        },
      ],
      label: {
        formatter: function (params) {
          return `{normal|${params.name}：}{value|${params.data.value} (${params.percent})%}`
        },
        rich: {
          normal: {
            color: "#223B3A",
            fontSize: 22,
            align: "left"
          },
          value: {
            fontSize: 22,
            fontWeight: 400,
          }
        }
      },
      // 间隔
      itemStyle: {
        normal: {
          borderWidth: 4,
          borderColor: '#fff',
        },
      },
    },
    // 内部绿色装饰圆环
    {
      type: 'pie',
      tooltip: {
        show: false
      },
      center: ['50%', '50%'],
      radius: ['35%', '35%'],
      label: {
        show: false // 不展示data中的value和name
      },
      data: [
        {
          value: 1, // 此处的值无所谓是多少
          name: '', // 因为不展示label，可不填
          itemStyle: {
            // 边框样式，浅蓝色，颜色可自行修改
            borderWidth: 12, // 边框宽度
            borderColor: '#CFEBE8' // 边框颜色
          }
        }
      ]
    }
  ]
}