下定决心,好好过一天 ~
原先 Apache EChartsTM 中的文本标签,只能对整块统一进行样式设置,并且仅仅支持颜色和字体的设置,从而导致不易于制作表达能力更强的文字描述信息。
echarts v3.7 以后,支持了富文本标签,能够:
1.定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。
2.对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。
3.在文本中使用图片做小图标或者背景。
4.特定组合以上的规则,可以做出简单表格、分割线等效果。
echarts 提供了丰富的文本标签配置项,包括:
字体基本样式设置:fontStyle、fontWeight、fontSize、fontFamily。
文字颜色:color。
文字描边:textBorderColor、textBorderWidth。
文字阴影:textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY。
文本块或文本片段大小:lineHeight、width、height、padding。
文本块或文本片段的对齐:align、verticalAlign。
文本块或文本片段的边框、背景(颜色或图片):backgroundColor、borderColor、borderWidth、borderRadius。
文本块或文本片段的阴影:shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。
文本块的位置和旋转:position、distance、rotate。
可以在各处的 rich 属性中定义文本片段样式
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
},
...
}
}
文本、文本框、文本片段的基本样式和装饰
每个文本可以设置基本的字体样式:fontStyle、fontWeight、fontSize、fontFamily。
可以设置文字的颜色 color 和边框的颜色 textBorderColor、textBorderWidth。
文本框可以设置边框和背景的样式:borderColor、borderWidth、backgroundColor、padding。
文本片段也可以设置边框和背景的样式:borderColor、borderWidth、backgroundColor、padding。
rich: {
Sunny: {
// 这样设定 backgroundColor 就可以是图片了。
backgroundColor: {
image: './data/asset/img/weather/sunny_128.png'
},
// 可以只指定图片的高度,从而图片的宽度根据图片的长宽比自动得到。
height: 30
}
}
分割线
rich: {
hr: {
borderColor: '#777',
// 这里把 width 设置为 '100%',表示分割线的长度充满文本块。
// 注意,这里是文本块内容盒(content box)的 100%,而不包含 padding。
// 虽然这和 CSS 相关的定义有所不同,但是在这类场景中更加方便。
width: '100%',
borderWidth: 0.5,
height: 0
}
}
示例:
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ', //富文本显示
rich: {
a: { //标题名的样式
color: '#6E7079',
lineHeight: 22, //标签的表格的上高度
align: 'center' //文字水平对齐方式
},
hr: { //分割线
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: { //数据名的样式
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33 //表格高度,行高
},
per: { //自定义百分比的样式
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4], //文字块内边距,[3,4,3,4]
borderRadius: 4
}
}