阅读(2960) (0)

ECharts图例组件配置 富文本样式

2017-09-01 15:17:02 更新

legend.textStyle.rich   |   Object

在 rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

例如:

label: {
    normal: {
        // 在文本中,可以对部分文本采用 rich 中定义样式。
        // 这里需要在文本中使用标记符号:
        // `{styleName|text content text content}` 标记样式名。
        // 注意,换行仍是使用 '\n'。
        formatter: [
            '{a|这段文本采用样式a}',
            '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
        ].join('\n'),
        rich: {
            a: {
                color: 'red',
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: 'xxx/xxx.jpg'
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: 'Microsoft YaHei',
                borderColor: '#449933',
                borderRadius: 4
            },
            ...
        }
    }
}

详情参见教程:富文本标签


legend.textStyle.rich.<user defined style name>   |   Object