如何让 ECharts 柱状图的 subtext 与 title 显示在同一行？

Question

在使用 ECharts 绘制柱状图时，如何让标题（title）与副标题（subtext）显示在同一行，是许多开发者常遇到的布局问题。默认情况下，subtext 会换行显示在 title 下方，影响整体美观。本文将介绍几种有效方法实现 title 和 subtext 的水平排列，包括使用富文本（rich text）格式、HTML 标签组合内容以及调整样式布局等技巧。通过这些方式，可以灵活控制标题区域的排版，提升图表界面的可读性与设计感，适用于各类 ECharts 柱状图应用场景。

Answer 1

如何在 ECharts 柱状图中实现标题与副标题水平排列

1. 问题背景与基本理解

ECharts 是一个广泛使用的开源可视化图表库，适用于多种数据展示场景。默认情况下，ECharts 的标题（title）和副标题（subtext）是垂直排列的，即副标题显示在主标题下方。

这种布局虽然清晰，但在某些 UI 设计需求下可能显得不够紧凑或美观。因此，开发者常常希望将这两个文本内容并列显示在同一行。

2. 使用富文本（Rich Text）方式

ECharts 提供了丰富的富文本支持功能，可以通过配置 rich 属性来自定义文本样式，并使用换行符 \n 控制排版。

option = {
    title: {
        text: '主标题',
        subtext: '副标题',
        rich: {
            main: { fontSize: 18, fontWeight: 'bold' },
            sub: { fontSize: 12, color: '#666', marginLeft: 10 }
        },
        text: '{main|主标题} {sub|副标题}'
    }
};
        

注意：这种方式需要将 subtext 合并到 text 中，并通过富文本样式控制间距与字体。

3. 利用 HTML 标签拼接内容

如果图表渲染环境允许使用 HTML 内容（如在网页中嵌入），可以考虑将标题部分直接以 HTML 字符串形式插入：

option = {
    title: {
        text: '主标题副标题',
        useHTML: true
    }
};
        

此方法依赖于浏览器对 HTML 渲染的支持，在移动端或某些框架中需谨慎使用。

4. 自定义 Title 区域布局

更高级的方式是利用 ECharts 的 title.left、title.top 等属性进行绝对定位，手动控制两个文本的位置。

参数	说明
textStyle	设置字体大小、颜色等样式
left / top	控制位置偏移量，实现对齐效果
formatter	自定义函数返回组合字符串

示例代码如下：

option = {
    title: [
        {
            text: '主标题',
            left: 'center',
            top: 10,
            textStyle: { fontSize: 16 }
        },
        {
            text: '副标题',
            left: 'center',
            top: 30,
            textStyle: { fontSize: 12, color: '#666' }
        }
    ]
};
        

通过多个 title 配置项叠加实现视觉上的“同行”效果。

5. 使用 CSS 定位与外部容器结合

对于集成在前端项目中的 ECharts 图表，还可以借助外部 HTML 容器与 CSS 样式来实现更灵活的排版。

• 将 ECharts 图表绘制在一个固定宽高的 <div> 容器中
• 在该容器内添加一个额外的 <div> 用于显示标题区域
• 使用 Flex 布局或 Grid 布局实现标题与副标题的水平排列

例如：

.container {
    display: flex;
    align-items: center;
}
.title-main {
    font-size: 18px;
    font-weight: bold;
}
.title-sub {
    font-size: 12px;
    color: #666;
    margin-left: 10px;
}
        

HTML 结构如下：

<div class="container">
    <div class="title-main">主标题</div>
    <div class="title-sub">副标题</div>
</div>
<div id="chart"></div>
        

然后将 ECharts 图表绘制在 #chart 容器中即可。

6. 总结性对比与适用场景分析

不同方案各有优劣，以下是对比总结：

方法	优点	缺点	适用场景
富文本（rich）	样式丰富，结构统一	兼容性有限	需要精细样式控制的图表
HTML 标签拼接	灵活自由	依赖 HTML 渲染环境	网页端开发或支持 HTML 的平台
多 title 定位	简单易实现	不易精确对齐	快速原型设计或非关键 UI 场景
CSS 外部容器	高度定制化，响应式强	增加 DOM 节点	大型前端项目或组件化系统