| (window.webpackJsonp=window.webpackJsonp||[]).push([[86],{380:function(n,e,o){"use strict";o.r(e),e.default="# 富文本标签\n\nApache ECharts<sup>TM</sup> 中的文本标签从 v3.7 开始支持富文本模式，能够：\n\n- 定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。\n- 对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。\n- 在文本中使用图片做小图标或者背景。\n- 特定组合以上的规则，可以做出简单表格、分割线等效果。\n\n开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：\n\n- 文本块（Text Block）：文本标签块整体。\n- 文本片段（Text fragment）：文本标签块中的部分文本。\n\n如下图示例：\n\n<md-example src=\"doc-example/text-block-fragment\" width=\"400\" height=\"300\"></md-example>\n\n## 文本样式相关的配置项\n\necharts 提供了丰富的文本标签配置项，包括：\n\n- 字体基本样式设置：`fontStyle`、`fontWeight`、`fontSize`、`fontFamily`。\n- 文字颜色：`color`。\n- 文字描边：`textBorderColor`、`textBorderWidth`。\n- 文字阴影：`textShadowColor`、`textShadowBlur`、`textShadowOffsetX`、`textShadowOffsetY`。\n- 文本块或文本片段大小：`lineHeight`、`width`、`height`、`padding`。\n- 文本块或文本片段的对齐：`align`、`verticalAlign`。\n- 文本块或文本片段的边框、背景（颜色或图片）：`backgroundColor`、`borderColor`、`borderWidth`、`borderRadius`。\n- 文本块或文本片段的阴影：`shadowColor`、`shadowBlur`、`shadowOffsetX`、`shadowOffsetY`。\n- 文本块的位置和旋转：`position`、`distance`、`rotate`。\n\n可以在各处的 `rich` 属性中定义文本片段样式。例如 [series-bar.label.rich](option.html#series-bar.label.rich)\n\n例如：\n\n```js\nlabelOption = {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n // 这里是文本块的样式设置：\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // rich 里是文本片段的样式设置：\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n }\n }\n};\n```\n\n> 注意：如果不定义 `rich`，不能指定文字块的 `width` 和 `height`。\n\n## 文本、文本框、文本片段的基本样式和装饰\n\n每个文本可以设置基本的字体样式：`fontStyle`、`fontWeight`、`fontSize`、`fontFamily`。\n\n可以设置文字的颜色 `color` 和边框的颜色 `textBorderColor`、`textBorderWidth`。\n\n文本框可以设置边框和背景的样式：`borderColor`、`borderWidth`、`backgroundColor`、`padding`。\n\n文本片段也可以设置边框和背景的样式：`borderColor`、`borderWidth`、`backgroundColor`、`padding`。\n\n例如：\n\n```js live\noption = {\n series: [\n {\n type: 'scatter',\n symbolSize: 1,\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n show: true,\n formatter: [\n 'Plain text',\n '{textBorder|textBorderColor + textBorderWidth}',\n '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',\n '{bg|backgroundColor + borderRadius + padding}',\n '{border|borderColor + borderWidth + borderRadius + padding}',\n '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'\n ].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#333',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n color: '#000',\n fontSize: 14,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n lineHeight: 30,\n rich: {\n textBorder: {\n fontSize: 20,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n },\n textShadow: {\n fontSize: 16,\n textShadowBlur: 5,\n textShadowColor: '#000',\n textShadowOffsetX: 3,\n textShadowOffsetY: 3,\n color: '#fff'\n },\n bg: {\n backgroundColor: '#339911',\n color: '#fff',\n borderRadius: 15,\n padding: 5\n },\n border: {\n color: '#000',\n borderColor: '#449911',\n borderWidth: 1,\n borderRadius: 3,\n padding: 5\n },\n shadow: {\n backgroundColor: '#992233',\n padding: 5,\n color: '#fff',\n shadowBlur: 5,\n shadowColor: '#336699',\n shadowOffsetX: 6,\n shadowOffsetY: 6\n }\n }\n }\n }\n }\n ]\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: -1,\n max: 1\n }\n};\n```\n\n## 标签的位置\n\n对于折线图、柱状图、散点图等，均可以使用 `label` 来设置标签。标签的相对于图形元素的位置，一般使用 [label.position](option.html#series-scatter.label.position)、[label.distance](option.html#series-scatter.label.distance) 来配置。\n\n试试在下面例子中修改`position`和`distance` 属性：\n\n```js live\noption = {\n series: [\n {\n type: 'scatter',\n symbolSize: 160,\n symbol: 'roundRect',\n data: [[1, 1]],\n label: {\n normal: {\n // 修改 position 和 distance 的值试试\n // 支持：'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'\n position: 'top',\n distance: 10,\n\n show: true,\n formatter: ['Label Text'].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#555',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n fontSize: 18,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n }\n }\n }\n ],\n xAxis: {\n max: 2\n },\n yAxis: {\n max: 2\n }\n};\n```\n\n> 注意：`position` 在不同的图中可取值有所不同。`distance` 并不是在每个图中都支持。详情请参见 [option 文档](${mainSitePath}option.html)。\n\n## 标签的旋转\n\n某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：\n\n```js live {layout: 'lr'}\nconst labelOption = {\n show: true,\n rotate: 90,\n formatter: '{c} {name|{a}}',\n fontSize: 16,\n rich: {\n name: {}\n }\n};\n\noption = {\n xAxis: [\n {\n type: 'category',\n data: ['2012', '2013', '2014', '2015', '2016']\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Forest',\n type: 'bar',\n barGap: 0,\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [320, 332, 301, 334, 390]\n },\n {\n name: 'Steppe',\n type: 'bar',\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [220, 182, 191, 234, 290]\n }\n ]\n};\n```\n\n这种场景下，可以结合 [align](option.html#series-bar.label.align) 和 [verticalAlign](option.html#series-bar.label.verticalAlign) 来调整标签位置。\n\n注意，逻辑是，先使用 `align` 和 `verticalAlign` 定位，再旋转。\n\n## 文本片段的排版和对齐\n\n关于排版方式，每个文本片段，可以想象成 CSS 中的 `inline-block`，在文档流中按行放置。\n\n每个文本片段的内容盒尺寸（`content box size`），默认是根据文字大小决定的。但是，也可以设置 `width`、`height` 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（`border box size`），由上述本身尺寸，加上文本片段的 `padding` 来得到。\n\n只有 `'\\n'` 是换行符，能导致换行。\n\n一行内，会有多个文本片段。每行的实际高度，由 `lineHeight` 最大的文本片段决定。文本片段的 `lineHeight` 可直接在 `rich` 中指定，也可以在 `rich` 的父层级中统一指定而采用到 `rich` 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（`border box size`）。\n\n在一行的 `lineHeight` 被决定后，一行内，文本片段的竖直位置，由文本片段的 `verticalAlign` 来指定（这里和 CSS 中的规则稍有不同）：\n\n- `'bottom'`：文本片段的盒的底边贴住行底。\n- `'top'`：文本片段的盒的顶边贴住行顶。\n- `'middle'`：居行中。\n\n文本块的宽度，可以直接由文本块的 `width` 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 `align` 决定了文本片段在行中的水平位置：\n\n- 首先，从左向右连续紧靠放置 `align` 为 `'left'` 的文本片段盒。\n- 然后，从右向左连续紧靠放置 `align` 为 `'right'` 的文本片段盒。\n- 最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。\n\n关于文字在文本片段盒中的位置：\n\n- 如果 `align` 为 `'center'`，则文字在文本片段盒中是居中的。\n- 如果 `align` 为 `'left'`，则文字在文本片段盒中是居左的。\n- 如果 `align` 为 `'right'`，则文字在文本片段盒中是居右的。\n\n## 特殊效果：图标、分割线、标题块、简单表格\n\n看下面的例子：\n\n```js live {layout: 'lr'}\noption = {\n series: [\n {\n type: 'scatter',\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n formatter: [\n '{tc|Center Title}{titleBg|}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n },\n {\n value: [0, 1],\n label: {\n normal: {\n formatter: [\n '{titleBg|Left Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n')\n }\n }\n },\n {\n value: [0, 2],\n label: {\n normal: {\n formatter: [\n '{titleBg|Right Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n }\n ],\n symbolSize: 1,\n label: {\n normal: {\n show: true,\n backgroundColor: '#ddd',\n borderColor: '#555',\n borderWidth: 1,\n borderRadius: 5,\n color: '#000',\n fontSize: 14,\n rich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n },\n tc: {\n align: 'center',\n color: '#eee'\n },\n hr: {\n borderColor: '#777',\n width: '100%',\n borderWidth: 0.5,\n height: 0\n },\n sunny: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'\n }\n },\n cloudy: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'\n }\n },\n showers: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'\n }\n }\n }\n }\n }\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: 0,\n max: 2,\n inverse: true\n }\n};\n```\n\n文本片段的 `backgroundColor` 可以指定为图片后，就可以在文本中使用图标了：\n\n```js\nlabelOption = {\n rich: {\n Sunny: {\n // 这样设定 backgroundColor 就可以是图片了。\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。\n height: 30\n }\n }\n};\n```\n\n分割线实际是用 border 实现的：\n\n```js\nlabelOption = {\n rich: {\n hr: {\n borderColor: '#777',\n // 这里把 width 设置为 '100%'，表示分割线的长度充满文本块。\n // 注意，这里是文本块内容盒（content box）的 100%，而不包含 padding。\n // 虽然这和 CSS 相关的定义有所不同，但是在这类场景中更加方便。\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n }\n};\n```\n\n标题块是使用 `backgroundColor` 实现的：\n\n```js\nlabelOption = {\n // 标题文字居左\n formatter: '{titleBg|Left Title}',\n rich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n }\n};\n\n// 标题文字居中。\n// 这个实现有些 tricky，但是，能够不引入更复杂的排版规则而实现这个效果。\nlabelOption = {\n formatter: '{tc|Center Title}{titleBg|}',\n rich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n }\n};\n```\n\n简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 [该例子](${exampleEditorPath}pie-rich-text)\n"}}]); |