echartslabel加边框_ECharts教程富⽂本标签-闪电教程JSRUN ECharts 富⽂本标签的应⽤
ECharts 富⽂本标签可以应⽤在许多地⽅，例如：
富⽂本标签的作⽤
其实，富⽂本标签是在 ECharts v3.7以后才增加的功能；在 ECharts v3.7之前的版本中，只能对整个块进⾏统⼀样式的设置，⽽且只可以设置字体和颜⾊，不易于制作表达能⼒更强的⽂字描述信息。
富⽂本标签的主要功能：
能够定制⽂本块整体的样式(如背景、边框、阴影等)、位置、旋转等。
能够对⽂本块中个别⽚段定义样式(如颜⾊、字体、⾼宽、背景、阴影等)、对齐⽅式等。
能够在⽂本中使⽤图⽚做⼩图标或者背景。
特定组合以上的规则，可以做出简单表格、分割线等效果。
⽂本块和⽂本⽚段的含义：
开始下⾯的介绍开始之前，先说明⼀下下⾯会使⽤的两个名词的含义：
⽂本块(Text Block)：⽂本标签块整体。
⽂本⽚段(Text Fregment)：⽂本标签块中的部分⽂本。
如下图⽰例：
ECharts ⽂本样式相关的配置项
ECharts 提供了丰富的⽂本标签配置项，包括：borderbox
字体基本样式设置：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 属性中定义⽂本⽚段样式。例如 al.rich
例如：
label: {
normal: {
// 在⽂本中，可以对部分⽂本采⽤ 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
},
...
}
}
}注意：如果不定义 rich，不能指定⽂字块的 width 和 height。
⽂本、⽂本框、⽂本⽚段的基本样式和装饰：
每个⽂本可以设置基本的字体样式：fontStyle、fontWeight、fontSize、fontFamily。
可以设置⽂字的颜⾊ color 和边框的颜⾊：textBorderColor、textBorderWidth。
⽂本框可以设置边框和背景的样式：borderColor、borderWidth、backgroundColor、padding。
⽂本⽚段也可以设置边框和背景的样式：borderColor、borderWidth、backgroundColor、padding。
例如：
标签的位置
对于折线图、柱状图、散点图等，均可以使⽤ label 来设置标签。
标签的相对于图形元素的位置，⼀般使⽤ label[normal|emphasis].position、label[normal|emphasis].distance 来配置。例如：
注意：position 在不同的图中可取值有所不同。distance 并不是在每个图中都⽀持。详情请参见 option ⽂档。
标签的旋转
某些图中，为了能有⾜够长的空间来显⽰标签，需要对标签进⾏旋转。例如：
上述实例通过结合 align 和 verticalAlign 来对标签位置进⾏了调整。
注意：在结合 align 和 verticalAlign 的时候要遵循先使⽤ align 和 verticalAlign 定位，然后再旋转的处理逻辑。
⽂本⽚段的排版和对齐
我们可以将 ECharts ⽂本⽚段的排版⽅式想象成 CSS 中的 inline-block，在⽂档流中按⾏进⾏放置。
每个⽂本⽚段的内容盒尺⼨(content box size)，默认是根据⽂字⼤⼩决定的。但是，也可以设置 width、height 来强制指定，虽然⼀般不会这么做(参见下⽂)。⽂本⽚段的边框盒尺⼨(border box size)，由上述本⾝尺⼨，加上⽂本⽚段的 padding 来得到。
只有 '\n' 是换⾏符，能导致换⾏。
⼀⾏内，会有多个⽂本⽚段。每⾏的实际⾼度，由 lineHeight 最⼤的⽂本⽚段决定。⽂本⽚段的 lineHeight 可直接在 rich 中指定，也可以在 rich 的⽗层级中统⼀指定⽽采⽤到 rich 的所有项中，如果都不指定，则取⽂本⽚段的边框盒尺⼨(border box size)。
在⼀⾏的 lineHeight 被决定后，⼀⾏内，⽂本⽚段的竖直位置，由⽂本⽚段的 verticalAlign 来指定(这⾥和 CSS 中的规则稍有不同)：
'bottom'：⽂本⽚段的盒的底边贴住⾏底。
'top'：⽂本⽚段的盒的顶边贴住⾏顶。
'middle'：居⾏中。
⽂本块的宽度直接由⽂本块的 width 指定，否则，由最长的⾏决定。
宽度决定后，在⼀⾏中进⾏⽂本⽚段的放置。⽂本⽚段的 align 决定了⽂本⽚段在⾏中的⽔平位置：
⾸先，从左向右连续紧靠放置 align 为 'left' 的⽂本⽚段盒。
然后，从右向左连续紧靠放置 align 为 'right' 的⽂本⽚段盒。
最后，剩余的没处理的⽂本⽚段盒，紧贴着，在中间剩余的区域中居中放置。
关于⽂字在⽂本⽚段盒中的位置：
如果 align 为 'center'，则⽂字在⽂本⽚段盒中是居中的。
如果 align 为 'left'，则⽂字在⽂本⽚段盒中是居左的。
如果 align 为 'right'，则⽂字在⽂本⽚段盒中是居右的。
例如：

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