echarts使主标题和副标题在同一行显示

最新推荐文章于 2025-08-08 16:23:44 发布

原创最新推荐文章于 2025-08-08 16:23:44 发布 · 5.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #title #同行

echarts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在ECharts中实现主标题和副标题在同一行并排显示的效果，通过将标题设置为数组，并调整left参数和textStyle属性，使主副标题水平对齐，适用于需要精确定位标题的图表设计。

echarts中，如果同时设置了主标题和副标题，副标题默认显示在主标题下方。若想要主标题和副标题在同一行，可以将title设置为数组，即：将主标题伪装成副标题。

option = {
    title: [{
        text: "Main Title",
        left:0,
        textStyle: {
          fontSize: 30,
        },
        
    },{
        text: "Sub Title",
        left:200,
        textStyle: {
          fontSize: 20
        }
    }], //!!!
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

效果：