如何缩小ECharts环形图中主文本与副标题的间距？

方法一：使用title组件的textGap属性（最简单方案） #

ECharts的title组件自带textGap配置项，专门用来控制主标题（text）和副标题（subtext）之间的间距，默认值为10。你只需在title配置中添加该属性，设置更小的数值（甚至负数）就能快速缩小间距。

修改后的完整配置代码：

option = {
    title: {
       text: `51`,
       subtext: 'INSTANCES',
       x: 'center',
       y: 'center',
       textGap: -10, // 按需调整数值，负数可进一步拉近两行距离
       textStyle:{
         color: '#111111',
         fontFamily: 'Montserrat',
         fontWeight: 'bolder',
         fontSize: 70,
       },
       subtextStyle:{
          fontSize: 16,
         color: '#888888',
       }
    },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['55%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 36, name: 'Standard' },
        { value: 12, name: 'High Memory' },
        { value: 3, name: 'High CPU' },
        { value: 3, name: 'Other' },
      ]
    }
  ]
};

方法二：使用富文本（rich）自定义标题（高精度控制） #

如果textGap的调整精度无法满足需求，你可以把主标题和副标题整合到同一个text中，通过富文本格式完全自定义样式与间距，实现更精细的布局。

示例代码：

option = {
    title: {
       text: '{mainText|51}\n{subText|INSTANCES}',
       x: 'center',
       y: 'center',
       textStyle:{
         rich: {
           mainText: {
             color: '#111111',
             fontFamily: 'Montserrat',
             fontWeight: 'bolder',
             fontSize: 70,
             lineHeight: 70 // 控制主文本行高
           },
           subText: {
             fontSize: 16,
             color: '#888888',
             lineHeight: 20 // 通过行高控制与主文本的间距
           }
         }
       }
    },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['55%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 36, name: 'Standard' },
        { value: 12, name: 'High Memory' },
        { value: 3, name: 'High CPU' },
        { value: 3, name: 'Other' },
      ]
    }
  ]
};

这种方式还能通过添加baseline（基线对齐）、offset（偏移量）等属性，实现更灵活的位置控制。

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