echart添加⽂本_ECharts⾃定义富⽂本Style.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
},
...
}
}
}
详情参见教程：富⽂本标签
[ default: "#fff" ]
⽂字的颜⾊。
[ default: 'normal' ]
⽂字字体的风格
可选：'normal'
'italic'
'oblique'
[ default: normal ]
⽂字字体的粗细
可选：'normal'
'bold'
'bolder'
'lighter'
100 | 200 | 300 |
[ default: 'sans-serif' ]
⽂字的字体系列
还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ... Style.rich..fontSize    |  number
[ default: 12 ]
⽂字的字体⼤⼩
⽂字⽔平对齐⽅式，默认⾃动。
可选：'left'
'center'
'right'
rich 中如果没有设置 align，则会取⽗层级的 align。例如：{
align: right,
rich: {
a: {
// 没有设置 `align`，则 `align` 为 right
}
}
}
⽂字垂直对齐⽅式，默认⾃动。
可选：'top'
'middle'
'bottom'
rich 中如果没有设置 verticalAlign，则会取⽗层级的 verticalAlign。例如：{ verticalAlign: bottom,
rich: {
a: {
// 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
}
}
}
⾏⾼。
rich 中如果没有设置 lineHeight，则会取⽗层级的 lineHeight。例如：{ lineHeight: 56,
rich: {
a: {
/
/ 没有设置 `lineHeight`，则 `lineHeight` 为 56
}
}
}
[ default: 'transparent' ]
⽂字块背景⾊。
可以是直接的颜⾊值，例如：'#123234', 'red', rgba(0,23,11,0.3)'。
可以⽀持使⽤图⽚，例如：backgroundColor: {
image: 'xxx/xxx.png'
// 这⾥可以是图⽚的 URL，
/
/ 或者图⽚的 dataURI，
// 或者 HTMLImageElement 对象，
// 或者 HTMLCanvasElement 对象。
}
当使⽤图⽚的时候，可以使⽤ width 或 height 指定⾼宽，也可以不指定⾃适应。Style.rich..borderColor    |  string
[ default: 'transparent' ]
⽂字块边框颜⾊。
[ default: 0 ]
⽂字块边框宽度。
[ default: 0 ]
⽂字块的圆⾓。
[ default: 0 ]
⽂字块的内边距。例如：padding: [3, 4, 5, 6]：表⽰ [上, 右, 下, 左] 的边距。padding: 4：表⽰ padding: [4, 4, 4, 4]。
padding: [3, 4]：表⽰ padding: [3, 4, 3, 4]。
注意，⽂字块的 width 和 height 指定的是内容⾼宽，不包含 padding。
[ default: 'transparent' ]
⽂字块的背景阴影颜⾊。
[ default: 0 ]
⽂字块的背景阴影长度。
[ default: 0 ]
⽂字块的背景阴影 X 偏移。
textstyle
[ default: 0 ]
⽂字块的背景阴影 Y 偏移。
⽂字块的宽度。⼀般不⽤指定，不指定则⾃动是⽂字的宽度。在想做表格项或者使⽤图⽚(参见 backgroundColor)时，可能会使⽤它。
注意，⽂字块的 width 和 height 指定的是内容⾼宽，不包含 padding。
width 也可以是百分⽐字符串，如 '100%'。表⽰的是所在⽂本块的 contentWidth(即不包含⽂本块的 padding)的百分之多少。之所以
以 contentWidth 做基数，因为每个⽂本⽚段只能基于 content box 布局。如果以 outerWidth 做基数，则百分⽐的计算在实⽤中不具有意义，可能会超出。
注意，如果不定义 rich 属性，则不能指定 width 和 height。
⽂字块的⾼度。⼀般不⽤指定，不指定则⾃动是⽂字的⾼度。在使⽤图⽚(参见 backgroundColor)时，可能会使⽤它。
注意，⽂字块的 width 和 height 指定的是内容⾼宽，不包含 padding。
注意，如果不定义 rich 属性，则不能指定 width 和 height。
[ default: 'transparent' ]
⽂字本⾝的描边颜⾊。
[ default: 0 ]
⽂字本⾝的描边宽度。
[ default: 'transparent' ]
⽂字本⾝的阴影颜⾊。
[ default: 0 ]
⽂字本⾝的阴影长度。
[ default: 0 ]
⽂字本⾝的阴影 X 偏移。
[ default: 0 ]
⽂字本⾝的阴影 Y 偏移。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。