如何用Apache ECharts制作中间带大数字的单环图

需求背景 #

想要制作一个单环图，中间显示大数字用于展示网站评分，参考了极坐标柱状图但不知道如何简化为单环并添加中心数字。当前代码如下：

option = {
  angleAxis: {
    show: false,
    max: 10
  },
  radiusAxis: {
    show: false,
    type: 'category',
    data: ['AAA', 'BBB', 'CCC', 'DDD']
  },
  polar: {},
  series: [
    {
      type: 'bar',
      data: [3, 4, 5, 6],
      colorBy: 'data',
      roundCap: true,
      label: {
        show: true,
        position: 'start',
        formatter: '{b}'
      },
      coordinateSystem: 'polar'
    }
  ]
};

实现代码 #

直接基于现有代码修改即可，以下是完整的可运行代码：

option = {
  angleAxis: {
    show: false,
    max: 10 // 设置评分满分，比如10分制，百分制改100
  },
  radiusAxis: {
    show: false,
    type: 'category',
    data: ['网站评分'] // 仅保留单个分类，对应单环
  },
  polar: {},
  series: [
    {
      type: 'bar',
      data: [8.5], // 当前网站评分值
      roundCap: true, // 保持环的两端圆润
      radius: ['70%', '85%'], // 控制环的内外半径，调整数值可改变环的粗细大小
      itemStyle: {
        color: '#5470c6' // 自定义环的颜色
      },
      label: {
        show: false // 关闭原有分类标签
      },
      coordinateSystem: 'polar'
    }
  ],
  // 中心大数字通过graphic组件实现
  graphic: [{
    type: 'text',
    left: 'center',
    top: 'center',
    style: {
      text: '8.5', // 显示的评分数字，可动态替换
      fontSize: 60,
      fontWeight: 'bold',
      fill: '#333'
    }
  }]
};

关键修改说明 #

• 单环配置：将radiusAxis.data改为单个分类，同时调整series.radius设置内外半径，形成环形效果
• 评分适配：angleAxis.max设为评分满分，series.data填入当前评分值，支持10分制、百分制等任意评分体系
• 中心数字：使用graphic组件在画布中心绘制大文本，可自由调整字体大小、颜色、粗细等样式，支持动态更新

内容的提问来源于stack exchange，提问作者TinyTiger