Echarts title和subtitle进行合并显示

最新推荐文章于 2025-03-25 09:37:20 发布

Jerry-Samon

最新推荐文章于 2025-03-25 09:37:20 发布

阅读量2.8k

点赞数 2

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/qq_37779333/article/details/106246295

版权

echarts 专栏收录该内容

0 篇文章

订阅专栏

本文探讨了Echarts中title和subtitle无法直接合并的问题，并提供了一个解决方案，即通过使用text数据并调整样式来实现两者的合并。附带源码示例和实际效果展示，期待更多优化建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：有关于echarts title 和 subtitle不能进行合并的问题。
解决思路：运用text数据然后调整样式解决。源码demo如下：

option = {
    title: [{
        text: '大标题',
        subtext: '',
        left:'left',
        top:"8px"
    },{
        text: '',
        subtext: '小标题',
        left:'200px',
       
    }],
    //调整echarts微调
    grid:{
                    x:44,
                    y:56,
                    x2:45,
                    y2:23,
                    borderWidth:1
                },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['蒸发量', '降水量'],
         
        
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLine: {
          lineStyle: {
            color: '#2898e5'  //轴
          },
        }
        },
        
    ],
    series: [
        {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint: {
                data: [
                    {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
                    {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};