| (window.webpackJsonp=window.webpackJsonp||[]).push([[26],{320:function(n,e,t){"use strict";t.r(e),e.default="# Rich Text\n\nRich text can be used in Apache ECharts<sup>TM</sup> labels of series, axis or other components since v3.7. Which supports:\n\n- Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.\n- Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text.\n- Image can be used in text as icon or background.\n- Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).\n\nAt the beginning, the meanings of two terms that will be used below should be clarified:\n\n- Text Block: The whole block of label text.\n- Text fragment: Some piece of text in a text block.\n\nFor example:\n\n<md-example src=\"doc-example/text-block-fragment\" width=\"400\" height=\"300\"></md-example>\n\n## Options about Text\n\necharts provides plenty of text options, including:\n\n- Basic font style: `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`.\n- Fill of text: `color`.\n- Stroke of text: `textBorderColor`, `textBorderWidth`.\n- Shadow of text: `textShadowColor`, `textShadowBlur`, `textShadowOffsetX`, `textShadowOffsetY`.\n- Box size of text block or text fragment: `lineHeight`, `width`, `height`, `padding`.\n- Alignment of text block or text fragment: `align`, `verticalAlign`.\n- Border, background (color or image) of text block or text fragment: `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`.\n- Shadow of text block or text fragment: `shadowColor`, `shadowBlur`, `shadowOffsetX`, `shadowOffsetY`.\n- Position and rotation of text block: `position`, `distance`, `rotate`.\n\nUser can defined styles for text fragment in `rich` property. For example, [series-bar.label.rich](option.html#series-bar.label.rich)\n\nFor example:\n\n```js\nlabelOption = {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style \"a\" is applied to this fragment}',\n '{b|Style \"b\" is applied to this fragment}This fragment use default style{x|use style \"x\"}'\n ].join('\\n'),\n\n // Styles for the whole text block are defined here:\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 // Styles for text fragments are defined here:\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\n> Notice: `width` 和 `height` only work when `rich` specified.\n\n## Basic Styles of Text, Text Block and Text Fragment\n\nBasic font style can be set to text: `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`.\n\nFill color and stroke color can be set to text: `color`, `textBorderColor`, `textBorderWidth`.\n\nBorder style and background style can be set to text block: `borderColor`, `borderWidth`, `backgroundColor`, `padding`.\n\nBorder style and background style can be set to text fragment too: `borderColor`, `borderWidth`, `backgroundColor`, `padding`.\n\nFor example:\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## Label Position\n\n`label` option can be use in charts like `bar`, `line`, `scatter`, etc. The position of a label, can be specified by [label.position](option.html#series-scatter.label.position)、[label.distance](option.html#series-scatter.label.distance).\n\nTry to modify the `position` and `distance` option in the following example:\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 // Options: '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> Notice, there are different optional values of `position` by different chart types. And `distance` is not supported in every chart. More detailed info can be checked in [option doc](${mainSitePath}option.html).\n\n## Label Rotation\n\nSometimes label is needed to be rotated. For example:\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) and[verticalAlign](option.html#series-bar.label.verticalAlign) can be used to adjust location of label in this scenario.\n\nNotice, `align` and `verticalAlign` are applied firstly, then rotate.\n\n## Layout and Alignment of Text fragment\n\nTo understand the layout rule, every text fragment can be imagined as a `inline-block` dom element in CSS.\n\n`content box size` of a text fragment is determined by its font size by default. It can also be specified directly by `width` and `height`, although they are rarely set. `border box size` of a text fragment is calculated by adding the `border box size` and `padding`.\n\nOnly `'\\n'` is the newline character, which breaks a line.\n\nMultiple text fragment exist in a single line. The height of a line is determined by the biggest `lineHeight` of text fragments. `lineHeight` of a text fragment can be specified in `rich`, or in the parent level of `rich`, otherwise using `box size` of the text fragment.\n\nHaving `lineHeight` determined, the vertical position of text fragments can be determined by `verticalAlign` (there is a little different from the rule in CSS):\n\n- `'bottom'`: The bottom edge of the text fragment sticks to the bottom edge of the line.\n- `'top'`: The top edge of the text fragment sticks to the top edge of the line.\n- `'middle'`: In the middle of the line.\n\nThe width of a text block can be specified by `width`, otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its `align`.\n\n- Firstly, place text fragments whose `align` is `'left'` from left to right continuously.\n- Secondly, place text fragments whose `align` is `'right'` from right to left continuously.\n- Finally, the text fragments remained will be sticked and placed in the center of the rest of space.\n\nThe position of text in a text fragment:\n\n- If `align` is `'center'`, text aligns at the center of the text fragment box.\n- If `align` is `'left'`, text aligns at the left of the text fragment box.\n- If `align` is `'right'`, text aligns at the right of the text fragment box.\n\n## Effects: Icon, Horizontal Rule, Title Block, Simple Table\n\nSee example:\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\nIcon is implemented by using image in `backgroundColor`.\n\n```js\nrich: {\n Sunny: {\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // Can only height specified, but leave width auto obtained\n // from the image, where the aspect ratio kept.\n height: 30\n }\n}\n```\n\nHorizontal rule (like HTML <hr> tag) can be implemented by border:\n\n```js\nrich: {\n hr: {\n borderColor: '#777',\n // width is set as '100%' to fullfill the text block.\n // Notice, the percentage is based on the content box, without\n // padding. Although it is a little different from CSS rule,\n // it is convinent in most cases.\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n```\n\nTitle block can be implemented by `backgroundColor`:\n\n```js\n// Title is at left.\nformatter: '{titleBg|Left Title}',\nrich: {\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// Title is in the center of the line.\n// This implementation is a little tricky, but is works\n// without more complicated layout mechanism involved.\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\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\nSimple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the [example](${exampleEditorPath}pie-rich-text).\n"}}]); |