ECharts subtext（副标题）边距开发教程

跟着珅聪学java2026-05-29 14:24

在 ECharts 中，subtext（副标题）是 title组件的一部分，它本身没有独立的"距离顶部"属性。调整其位置的核心思路是整体移动 title 组件 ，或者通过**内边距（padding）**微调。

针对你的饼图场景，这里提供两种最实用的实现方案。

方案一：调整 title 组件的 top 值（推荐）

这是最直接的方法。通过设置 title.top，将整个标题块（包含主标题和副标题）向下移动。

复制代码

option = {
  title: {
    text: '主标题',      // 主标题文本
    subtext: '副标题',   // 你需要调整距离的副标题
    // 关键配置：控制整个标题块距离容器顶部的距离
    top: '10%',         // 可以是像素值（如 20），也可以是百分比（推荐响应式）
    left: 'center',     // 水平居中
    textStyle: {
      // 主标题样式
    },
    subtextStyle: {
      // 副标题样式
    }
  },
  series: [
    {
      type: 'pie',
      // ... 你的饼图数据配置
    }
  ]
};

参数说明：

top: '10%'：表示标题区块顶部距离容器顶部 10% 的高度。数值越大，距离顶部越远。
top: 20：固定 20 像素距离。

方案二：利用 padding 增加顶部内边距

如果你希望标题文字本身不动，但让副标题区域在视觉上"撑开"一些，可以使用 padding。

复制代码

title: {
  text: '主标题',
  subtext: '副标题',
  left: 'center',
  top: 0, // 可以先贴顶
  // 关键配置：设置标题区块的内边距（上、右、下、左）
  padding: [30, 0, 0, 0], // 上边距30px，其他方向为0
  itemGap: 5, // 可选：调整主标题和副标题之间的间距
}

关键属性速查

属性	作用	示例值
`title.top`	核心属性。控制整个标题区块距离容器顶部的距离。	`20`（像素）或 `'10%'`（百分比）
`title.padding`	标题区块的内边距。数组顺序为 `[上, 右, 下, 左]`。	`[30, 0, 0, 0]`
`title.itemGap`	调整主标题（text）与副标题（subtext）之间的行间距。	`10`