在 ECharts 中,你可以通过 subtext 和 subtextStyle 配置项为副标题应用富文本样式,类似于主标题的设置。以下是一个示例:
option = {
    title: {
        text: '主标题',
        subtext: '{a|这是副标题} {b|富文本} {c|样式}',
        textStyle: {
            fontSize: 18,
            fontWeight: 'bold'
        },
        subtextStyle: {
            rich: {
                a: {
                    color: 'red',
                    fontSize: 16,
                    fontWeight: 'bold'
                },
                b: {
                    color: 'blue',
                    fontSize: 14,
                    fontStyle: 'italic'
                },
                c: {
                    color: 'green',
                    fontSize: 12,
                    backgroundColor: '#eee',
                    padding: [2, 5],
                    borderRadius: 4
                }
            }
        }
    },
    // 其他配置项...
};

在这个例子中,副标题文本为 {a|这是副标题} {b|富文本} {c|样式},通过使用 {} 定义了富文本块,每个块都有一个标识符和相应的样式。

  •  a 对应红色、16 号、粗体的文本块。

  •  b 对应蓝色、14 号、斜体的文本块。

  •  c 对应绿色、12 号、有背景色、圆角边框的文本块。


通过 rich 属性中的定义,你可以按照需要组合不同样式的富文本块,使副标题具有更灵活的样式。这样的自定义富文本功能使得你可以更加精细地控制标题的显示效果。


转载请注明出处:http://www.zyzy.cn/article/detail/5109/ECharts