需求场景

在echarts的环形图里加上文字和数字并自适应。如下图：

实现思路

在series加上一层，只放文字和数字。
重点代码如下：

// 就是这里！
{
    name: '',
    z: -1,
    type: 'gauge',
    radius: '-50%',
    center: [`50%`, `50%`],
    // 配置中间的数字
    detail: {
      // 调节数字位置
      offsetCenter: [0, 20],
      fontSize: 30,
    },
    pointer: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    // 中间的字和数字 数据
    data: [
      {
        value: 20,
        name: '总量',
      },
    ],
  },

全部代码示例

这是上面环形图的代码，可直接复制粘贴到 echarts官网 试试效果。

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    },
    
    // 就是这里！
    {
        name: '',
        z: -1,
        type: 'gauge',
        radius: '-50%',
        center: [`50%`, `50%`],
        // 配置中间的数字
        detail: {
          // 调节数字位置
          offsetCenter: [0, 20],
          fontSize: 30,
        },
        pointer: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        // 中间的字和数字 数据
        data: [
          {
            value: 20,
            name: '总量',
          },
        ],
      },
  ]
};

完