echarts中富文本标签rich的用法

701 阅读1分钟

由于最近又开始使用echarts,虽然之前使用过,但时间过去太久导致很多配置项都忘记了,最近复习了写富文本标签的用法,想着记录下来,在需要的时候可以查找使用。

label: {
    // 在文本中,可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号:
    // `{styleName|text content text content}` 标记样式名。
    // 注意,换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    // 这里是文本块的样式设置:
    color: '#333',
    fontSize: 5,
    fontFamily: 'Arial',
    borderWidth: 3,
    backgroundColor: '#984455',
    padding: [3, 10, 10, 5],
    lineHeight: 20,

    // rich 里是文本片段的样式设置:
    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

官网参考连接:echarts.apache.org/zh/tutorial…